/* ==========================================================================
   AFRI design tokens
   Every colour, size and timing on this site comes from this file.
   Do not write a raw hex value anywhere else.
   ========================================================================== */

:root {
  /* --- brand green: sampled from the AFRI logo mark ---------------------- */
  --brand-950: #072A12;
  --brand-900: #0B3A1A;
  --brand-800: #0F4A22;
  --brand-700: #15682C;   /* primary */
  --brand-600: #1B7A33;   /* logo green */
  --brand-500: #23913D;
  --brand-200: #B9DFC3;
  /* Solid green surfaces carry white text, so they must NOT lighten in dark
     mode the way the text greens do. Kept out of the dark-mode block below. */
  --brand-solid:       #15682C;
  --brand-solid-hover: #1B7A33;
  --brand-100: #DCEFE1;
  --brand-50:  #F0F7F1;

  /* --- gold: the single accent, sampled from the logo wheat -------------- */
  --gold-700: #9A5F0B;   /* AA on paper (4.97) and on the sunken band (4.71) */
  --gold-600: #C8801A;    /* passes AA on paper */
  --gold-500: #E9A227;    /* the accent */
  --gold-400: #F5B335;    /* logo gold */
  --gold-100: #FBEBCE;

  /* --- neutrals --------------------------------------------------------- */
  --paper:      #FAF9F6;
  --surface:    #FFFFFF;
  --surface-2:  #F4F3EE;
  --ink-900:    #141613;
  --ink-700:    #33372F;
  --ink-500:    #5B615A;
  --ink-400:    #7C8279;
  --line:       #E4E3DC;
  --line-soft:  #EFEEE8;

  /* --- semantic --------------------------------------------------------- */
  --bg:            var(--paper);
  --bg-elevated:   var(--surface);
  --bg-sunken:     var(--surface-2);
  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-on-dark:  #F2F4EF;
  --text-on-dark-muted: #B6C2B4;
  --accent:        var(--gold-500);
  --accent-text:   var(--gold-700);
  --border:        var(--line);
  --focus:         var(--brand-600);

  /* --- type ------------------------------------------------------------- */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --step--2: clamp(0.75rem,  0.73rem + 0.10vw, 0.8125rem);
  --step--1: clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem);
  --step-0:  clamp(1rem,     0.97rem + 0.15vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
  --step-2:  clamp(1.3125rem,1.24rem + 0.37vw, 1.5rem);
  --step-3:  clamp(1.5rem,   1.38rem + 0.6vw,  1.875rem);
  --step-4:  clamp(1.875rem, 1.68rem + 0.98vw, 2.5rem);
  --step-5:  clamp(2.25rem,  1.93rem + 1.6vw,  3.25rem);
  --step-6:  clamp(2.625rem, 2.1rem + 2.6vw,   4.25rem);

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.022em;
  --tracking-flat:  -0.01em;
  --tracking-wide:  0.08em;

  /* --- space (4px base) -------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  --section-y: clamp(3.5rem, 2.4rem + 5.5vw, 7rem);
  --gutter:    clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --measure:   66ch;
  --max-w:     1240px;
  --max-w-narrow: 860px;

  /* --- shape: one radius system, used everywhere ------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-full: 999px;

  /* --- elevation: tinted to the brand, never pure black ------------------ */
  --shadow-sm: 0 1px 2px rgba(11, 58, 26, 0.06),
               0 1px 3px rgba(11, 58, 26, 0.05);
  --shadow-md: 0 2px 4px rgba(11, 58, 26, 0.05),
               0 8px 20px rgba(11, 58, 26, 0.07);
  --shadow-lg: 0 4px 8px rgba(11, 58, 26, 0.05),
               0 18px 44px rgba(11, 58, 26, 0.10);

  /* --- motion ------------------------------------------------------------ */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:  cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast:  140ms;
  --dur:       240ms;
  --dur-slow:  520ms;

  --nav-h: 76px;
}

/* ==========================================================================
   Dark mode. Same tokens, different values. Hierarchy and the gold accent
   survive the flip; the brand green lightens so it stays legible.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #0E100D;
    --bg-elevated:  #171A15;
    --bg-sunken:    #121410;
    --text:         #F2F4EF;
    --text-muted:   #A3AC9F;
    --border:       #2A2E27;
    --line:         #2A2E27;
    --line-soft:    #21251E;

    --brand-700: #2FA04D;
    --brand-600: #3AB45A;
    --brand-500: #4CC66C;
    --brand-100: #16301D;
    --brand-50:  #111C13;

    --accent:      var(--gold-400);
    --accent-text: var(--gold-400);
    --focus:       var(--gold-400);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 18px 44px rgba(0, 0, 0, 0.45);
  }
}