/* ============================================================
   FIELD DATA AFRICA — Design tokens
   Editorial / organic. Forest green dominant, orange accent.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --color-bg:        #f6f2ea;   /* warm cream */
  --color-surface:   #ffffff;
  --color-surface-2: #efe9dd;   /* tinted block */
  --color-fg:        #15211b;   /* near-black with green warmth */
  --color-muted:     #5e6660;
  --color-border:    #d9d2c2;
  --color-accent:    #EC6534;   /* FDA orange */
  --color-accent-2:  #1B3A2D;   /* FDA forest green */
  --color-accent-soft: #FBE7DA; /* peach tint */
  --color-green-soft:  #DFE7DF; /* sage tint */
  --color-success:   #1B3A2D;
  --color-danger:    #b91c1c;

  /* ---- Typography ---- */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "Bricolage Grotesque", ui-sans-serif, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Fluid type scale (perfect-fourth ratio for editorial) */
  --fs-xs:   clamp(0.78rem, 0.75rem + 0.2vw, 0.85rem);
  --fs-sm:   clamp(0.9rem,  0.86rem + 0.2vw, 0.98rem);
  --fs-base: clamp(1.02rem, 0.96rem + 0.3vw, 1.13rem);
  --fs-lg:   clamp(1.18rem, 1.05rem + 0.6vw, 1.38rem);
  --fs-xl:   clamp(1.35rem, 1.1rem  + 1.0vw, 1.80rem);
  --fs-2xl:  clamp(1.7rem,  1.3rem  + 1.8vw, 2.40rem);
  --fs-3xl:  clamp(2rem,    1.4rem  + 2.5vw, 3.20rem);
  --fs-4xl:  clamp(2.8rem,  1.8rem  + 4.5vw, 5rem);
  --fs-numeral: clamp(4rem, 3rem + 8vw, 10rem);  /* the signature big number */

  --lh-tight:  1.05;
  --lh-snug:   1.22;
  --lh-normal: 1.6;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.10em;

  /* ---- Spacing (8pt grid) ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px rgba(21, 33, 27, 0.06), 0 1px 1px rgba(21, 33, 27, 0.04);
  --shadow-2: 0 6px 24px -8px rgba(21, 33, 27, 0.18), 0 2px 6px rgba(21, 33, 27, 0.06);
  --shadow-3: 0 24px 64px -16px rgba(21, 33, 27, 0.25);

  /* ---- Motion ---- */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:   140ms;
  --dur:        260ms;
  --dur-slow:   520ms;

  /* ---- Layout ---- */
  --content-max: 1440px;
  --content-narrow: 1080px;
  --gutter:      clamp(1.1rem, 3vw, 2.5rem);
}

[data-theme="dark"] {
  --color-bg:      #0F1A14;
  --color-surface: #15211b;
  --color-surface-2: #1c2c24;
  --color-fg:      #f3eee2;
  --color-muted:   #a5a89e;
  --color-border:  #28362d;
  --color-accent:  #F26230;
  --color-accent-2:#7DB89A;
  --color-accent-soft: #2a1e16;
  --color-green-soft:  #1c2c24;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 6px 24px -8px rgba(0,0,0,0.6);
  --shadow-3: 0 24px 64px -16px rgba(0,0,0,0.7);
}