/* ============================================================
   BUA FOODS — Colors & Type Foundations (handoff reference copy)
   ------------------------------------------------------------
   Design tokens, type scale, and semantic element defaults for
   the Loading Manifest Platform + Operations Hub.

   NOTE: the brand @font-face rules live in the design system's
   root colors_and_type.css (served alongside the /fonts folder).
   This reference copy intentionally OMITS them, so text falls
   back to the stacks in --font-display / --font-body / --font-mono.
   When rebuilding in production, self-host DM Sans + Sora (or the
   licensed brand faces) plus IBM Plex Mono.
   ============================================================ */

/* Google-font substitutes for the licensed brand faces (see note above).
   Swap for self-hosted DM Sans + Sora + IBM Plex Mono in production. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --bua-red:        #C8102E;   /* primary — the shield */
  --bua-red-dark:   #A00F25;   /* hover / pressed / deep */
  --bua-red-darker: #7A0B1C;   /* text on light, deep ground */
  --bua-green:      #2E9E48;   /* secondary — "FOODS", growth, agriculture */
  --bua-green-dark: #1F7A37;
  --bua-gold:       #E8A317;   /* accent — the globe, wheat, energy */
  --bua-gold-dark:  #C2840C;

  /* ---------- TINTS (surfaces / fills) ---------- */
  --red-50:    #FDEEF0;
  --red-100:   #FAD4DA;
  --green-50:  #ECF7EF;
  --green-100: #D2EBD9;
  --gold-50:   #FDF4E0;
  --gold-100:  #F8E5B8;

  /* ---------- NEUTRALS (warm-leaning greys) ---------- */
  --ink:       #1A1614;   /* near-black, warm */
  --ink-2:     #3D3733;   /* body strong */
  --slate:     #5E5650;   /* secondary text */
  --slate-2:   #877E76;   /* muted / captions */
  --line:      #E7E1DB;   /* hairline borders */
  --line-2:    #F1ECE7;   /* faint dividers */
  --paper:     #FBF8F4;   /* warm page background */
  --paper-2:   #F4EFE9;   /* alt section background */
  --white:     #FFFFFF;

  /* ---------- SEMANTIC ROLES ---------- */
  --fg1: var(--ink);          /* primary foreground */
  --fg2: var(--slate);        /* secondary foreground */
  --fg3: var(--slate-2);      /* tertiary / captions */
  --bg1: var(--white);        /* primary surface */
  --bg2: var(--paper);        /* page background */
  --bg3: var(--paper-2);      /* alt section */
  --border: var(--line);
  --accent: var(--bua-red);
  --accent-fg: #FFFFFF;
  --link: var(--bua-red);
  --link-hover: var(--bua-red-dark);

  /* ---------- STATUS ---------- */
  --success: #2E9E48;
  --warning: #E8A317;
  --danger:  #C8102E;
  --info:    #2563A8;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Sora', 'Archivo', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ---------- TYPE SCALE (display = tight, confident) ---------- */
  --display-1: 800 clamp(48px, 7vw, 84px)/0.98 var(--font-display);
  --display-2: 800 clamp(38px, 5vw, 60px)/1.02 var(--font-display);
  --h1: 700 clamp(32px, 4vw, 44px)/1.08 var(--font-display);
  --h2: 700 28px/1.15 var(--font-display);
  --h3: 600 22px/1.25 var(--font-display);
  --h4: 600 18px/1.3 var(--font-display);
  --eyebrow: 700 13px/1.2 var(--font-body);   /* uppercase label */
  --lead: 400 20px/1.55 var(--font-body);
  --body: 400 17px/1.6 var(--font-body);
  --small: 400 15px/1.55 var(--font-body);
  --caption: 500 13px/1.4 var(--font-body);
  --mono: 500 14px/1.5 var(--font-mono);

  /* tracking */
  --track-tight: -0.02em;
  --track-eyebrow: 0.14em;

  /* ---------- RADII ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, warm-tinted) ---------- */
  --shadow-sm: 0 1px 2px rgba(26,22,20,.06), 0 1px 1px rgba(26,22,20,.04);
  --shadow-md: 0 4px 12px rgba(26,22,20,.08), 0 2px 4px rgba(26,22,20,.05);
  --shadow-lg: 0 16px 40px rgba(26,22,20,.12), 0 4px 12px rgba(26,22,20,.06);
  --shadow-red: 0 8px 24px rgba(200,16,46,.22);

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  --maxw: 1200px;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
body {
  font: var(--body);
  color: var(--fg1);
  background: var(--bg2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-1 { font: var(--display-1); letter-spacing: var(--track-tight); }
.display-2 { font: var(--display-2); letter-spacing: var(--track-tight); }
h1, .h1 { font: var(--h1); letter-spacing: var(--track-tight); margin: 0; }
h2, .h2 { font: var(--h2); letter-spacing: var(--track-tight); margin: 0; }
h3, .h3 { font: var(--h3); margin: 0; }
h4, .h4 { font: var(--h4); margin: 0; }
.lead { font: var(--lead); color: var(--fg2); }
p, .body { font: var(--body); }
small, .small { font: var(--small); color: var(--fg2); }
.caption { font: var(--caption); color: var(--fg3); }
code, .mono { font: var(--mono); }

.eyebrow {
  font: var(--eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bua-red);
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }