/* ==========================================================================
   BORDERLANDS FOUNDATION — Design Tokens
   Shared across all sites. Each site imports this file first.
   ========================================================================== */

:root {

  /* --- Color Palette ---
     Anchored in Ukrainian context: deep navy authority, warm gold accent,
     neutral warm grays. Avoids flag-literal blue/yellow cliché. */

  /* Core brand */
  --color-navy-950:  #0A0F1E;  /* Near-black backgrounds */
  --color-navy-900:  #0F1729;  /* Primary dark bg */
  --color-navy-800:  #1A2545;  /* Section alternates */
  --color-navy-700:  #253361;  /* Borders, dividers */
  --color-navy-500:  #3D5296;  /* Muted elements */
  --color-navy-300:  #7B93CC;  /* Subdued text on dark */
  --color-navy-100:  #D6DDEF;  /* Very light tint */

  /* Gold accent — trust, legacy, importance */
  --color-gold-600:  #B8860B;  /* Deep gold for dark bg */
  --color-gold-500:  #D4A017;  /* Primary accent */
  --color-gold-400:  #E8B830;  /* Hover states */
  --color-gold-200:  #F5DFA0;  /* Light gold tints */
  --color-gold-100:  #FBF3D8;  /* Warm bg tint */

  /* Neutral warm grays */
  --color-stone-950: #0C0B09;
  --color-stone-900: #1C1A14;
  --color-stone-700: #3D3A30;
  --color-stone-500: #6B6658;
  --color-stone-300: #B5B0A5;
  --color-stone-100: #E8E5DF;
  --color-stone-50:  #F5F3EF;

  /* Pure */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Warm white — the primary site background (NOT pure white) */
  --color-warm-50:   #FAF7F1;  /* Primary page background */
  --color-warm-100:  #F4EFE5;  /* Alternate warm section */
  --color-warm-200:  #ECE6D8;  /* Warm borders / cards */

  /* Semantic roles */
  --color-bg-dark:    var(--color-navy-900);
  --color-bg-light:   var(--color-warm-50);   /* warm white, not stone */
  --color-bg-white:   var(--color-warm-50);   /* default bg is warm white */
  --color-bg-alt:     var(--color-warm-100);
  --color-text-dark:  var(--color-navy-950);
  --color-text-light: var(--color-warm-50);
  --color-text-muted: var(--color-stone-500);
  --color-accent:     var(--color-gold-500);
  --color-accent-hover: var(--color-gold-400);
  --color-border:     var(--color-stone-100);
  --color-border-dark: var(--color-navy-700);

  /* Status */
  --color-success: #2D7A4F;
  --color-error:   #C0392B;

  /* --- Typography ---
     Single-family system: Figtree does everything (headlines + body).
     Warm, friendly, highly legible. Sentence case ALWAYS — never caps. */

  --font-sans:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  /* mil-tech site may override --font-sans to 'Plus Jakarta Sans' */

  /* Scale (Major Third — 1.250) */
  --text-xs:   0.64rem;   /* 10px */
  --text-sm:   0.8rem;    /* 13px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.563rem;  /* 25px */
  --text-2xl:  1.953rem;  /* 31px */
  --text-3xl:  2.441rem;  /* 39px */
  --text-4xl:  3.052rem;  /* 49px */
  --text-5xl:  3.815rem;  /* 61px */
  --text-6xl:  4.768rem;  /* 76px */

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.15em;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   900;

  /* --- Spacing (8px base grid) --- */
  --space-1:   0.25rem;  /* 4px  */
  --space-2:   0.5rem;   /* 8px  */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */
  --space-32:  8rem;     /* 128px */
  --space-40:  10rem;    /* 160px */
  --space-48:  12rem;    /* 192px */

  /* --- Layout --- */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;

  --section-padding-y: var(--space-20);
  --section-padding-x: var(--space-8);

  /* --- Borders --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  --border-width: 1px;
  --border-width-2: 2px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.14), 0 4px 10px rgba(0,0,0,0.08);
  --shadow-xl:  0 20px 50px rgba(0,0,0,0.18), 0 8px 20px rgba(0,0,0,0.10);
  --shadow-gold: 0 0 0 3px rgba(212, 160, 23, 0.25);

  /* --- Motion --- */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* --- Z-index layers --- */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
}

/* --- Responsive token overrides --- */
@media (max-width: 768px) {
  :root {
    --text-5xl: 3rem;
    --text-6xl: 3.5rem;
    --section-padding-y: var(--space-16);
    --section-padding-x: var(--space-6);
  }
}

@media (max-width: 480px) {
  :root {
    --text-4xl: 2.2rem;
    --text-5xl: 2.6rem;
    --section-padding-y: var(--space-12);
    --section-padding-x: var(--space-4);
  }
}