/* ==========================================================================
   Dairy Connect — design tokens (from the homepage handoff design system)
   Colour · type · spacing · radii · shadows · motion, plus light base resets.
   Self-hosted webfonts. Font URLs are root-relative so the file can live
   anywhere and still be served from the project root.
   ========================================================================== */

/* ---- FS Albert Pro (primary brand typeface) ---- */
@font-face{font-family:"FS Albert Pro";src:url("/assets/fonts/FSAlbertPro-Thin.woff") format("woff");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"FS Albert Pro";src:url("/assets/fonts/FSAlbertPro-ThinItalic.woff") format("woff");font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:"FS Albert Pro";src:url("/assets/fonts/FSAlbertPro-Light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"FS Albert Pro";src:url("/assets/fonts/FSAlbertPro-LightItalic.woff") format("woff");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"FS Albert Pro";src:url("/assets/fonts/FSAlbertPro.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"FS Albert Pro";src:url("/assets/fonts/FSAlbertPro-Italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"FS Albert Pro";src:url("/assets/fonts/FSAlbertPro-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"FS Albert Pro";src:url("/assets/fonts/FSAlbertPro-BoldItalic.woff") format("woff");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"FS Albert Pro";src:url("/assets/fonts/FSAlbertPro-ExtraBold.woff") format("woff");font-weight:800;font-style:normal;font-display:swap}

/* ---- Switzer (display headlines per brand canon: Black 900, Bold 700, Light 300) ---- */
@font-face{font-family:"Switzer";src:url("/assets/fonts/Switzer-Thin.woff") format("woff");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("/assets/fonts/Switzer-Extralight.woff") format("woff");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("/assets/fonts/Switzer-Light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("/assets/fonts/Switzer-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("/assets/fonts/Switzer-Black.woff") format("woff");font-weight:900;font-style:normal;font-display:swap}

:root{
  /* ---- Orange (primary) ---- */
  --orange-50:#fff2ec;
  --orange-100:#ffe0d2;
  --orange-200:#ffc0a4;
  --orange-300:#ff9b70;
  --orange-400:#ff7539;
  --orange-500:#ff5205;   /* brand orange */
  --orange-600:#e04600;
  --orange-700:#b23700;
  --orange-800:#822800;
  --orange-900:#521a00;

  /* ---- Green (secondary / deep) ---- */
  --green-50:#e7efed;
  --green-100:#c6dbd6;
  --green-200:#8fb8b0;
  --green-300:#559389;
  --green-400:#1f6d62;
  --green-500:#005248;
  --green-600:#00423b;    /* brand green */
  --green-700:#00352f;
  --green-800:#002823;
  --green-900:#001a17;

  /* ---- Neutrals (offwhite-anchored, green-tinted ink) ---- */
  --white:#ffffff;
  --paper:#f7f7ed;        /* brand offwhite */
  --sand-100:#f0f0e4;
  --sand-200:#e6e6d8;
  --gray-100:#ecece4;
  --gray-200:#d8d9cf;
  --gray-300:#bcbeb3;
  --gray-400:#989b90;
  --gray-500:#71756b;
  --gray-600:#53574e;
  --gray-700:#3a3d37;
  --gray-800:#242621;
  --ink:#14201d;          /* near-black, green-tinted */

  /* ---- Semantic aliases ---- */
  --color-brand:var(--orange-500);
  --color-brand-hover:var(--orange-600);
  --color-brand-active:var(--orange-700);
  --color-accent:var(--green-600);

  --surface-page:var(--paper);
  --surface-card:var(--white);
  --surface-sunken:var(--sand-100);
  --surface-inverse:var(--green-600);
  --surface-brand:var(--orange-500);

  --text-heading:var(--ink);
  --text-body:var(--gray-700);
  --text-muted:var(--gray-500);
  --text-on-brand:var(--paper);
  --text-on-inverse:var(--paper);
  --text-link:var(--orange-600);
  --text-link-hover:var(--orange-700);

  --border-subtle:var(--gray-200);
  --border-default:var(--gray-300);
  --border-strong:var(--ink);

  --focus-ring:color-mix(in oklab,var(--orange-500) 55%,transparent);

  /* ---- Type ---- */
  --font-brand:"FS Albert Pro",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-display:"Switzer","FS Albert Pro",-apple-system,sans-serif;

  --fw-thin:100;
  --fw-light:300;
  --fw-regular:400;
  --fw-bold:700;
  --fw-extrabold:800;

  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-md:18px;
  --text-lg:20px;
  --text-xl:25px;
  --text-2xl:31px;
  --text-3xl:39px;
  --text-4xl:49px;
  --text-5xl:61px;
  --text-6xl:76px;

  --leading-tight:1.05;
  --leading-snug:1.15;
  --leading-normal:1.35;
  --leading-relaxed:1.6;

  --tracking-tight:-0.02em;
  --tracking-snug:-0.01em;
  --tracking-wide:0.04em;
  --tracking-caps:0.08em;

  --type-display:var(--fw-bold) var(--text-6xl)/var(--leading-tight) var(--font-brand);
  --type-h1:var(--fw-bold) var(--text-4xl)/var(--leading-tight) var(--font-brand);
  --type-h2:var(--fw-bold) var(--text-3xl)/var(--leading-snug) var(--font-brand);
  --type-h3:var(--fw-bold) var(--text-2xl)/var(--leading-snug) var(--font-brand);
  --type-h4:var(--fw-bold) var(--text-xl)/var(--leading-snug) var(--font-brand);
  --type-subhead:var(--fw-bold) var(--text-lg)/var(--leading-normal) var(--font-brand);
  --type-body:var(--fw-light) var(--text-base)/var(--leading-relaxed) var(--font-brand);
  --type-body-strong:var(--fw-regular) var(--text-base)/var(--leading-relaxed) var(--font-brand);
  --type-small:var(--fw-light) var(--text-sm)/var(--leading-normal) var(--font-brand);
  --type-eyebrow:var(--fw-bold) var(--text-xs)/1 var(--font-brand);

  /* ---- Spacing (4px base) ---- */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px;  --space-6:24px;  --space-8:32px;  --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;

  /* ---- Radii ---- */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-2xl:32px;
  --radius-pill:999px;

  /* ---- Shadows (warm, ink-tinted, never pure black) ---- */
  --shadow-xs:0 1px 2px rgba(20,32,29,.06);
  --shadow-sm:0 1px 3px rgba(20,32,29,.08),0 1px 2px rgba(20,32,29,.04);
  --shadow-md:0 4px 12px rgba(20,32,29,.08),0 2px 4px rgba(20,32,29,.04);
  --shadow-lg:0 12px 32px rgba(20,32,29,.10),0 4px 8px rgba(20,32,29,.05);
  --shadow-xl:0 24px 60px rgba(20,32,29,.14);
  --shadow-brand:0 10px 30px rgba(255,82,5,.28);

  /* ---- Layout ---- */
  --container-lg:1200px;
  --container-xl:1360px;

  /* ---- Motion ---- */
  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:360ms;
}

/* ---- light base resets & element defaults ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);text-wrap:balance}
h1{font:var(--type-h1)}
h2{font:var(--type-h2)}
h3{font:var(--type-h3)}
h4{font:var(--type-h4)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
::selection{background:var(--orange-200);color:var(--ink)}