/* ============================================================
   GACW — DESIGN TOKENS v1.0
   Source of truth for all design decisions across all pages.
   Modify here → changes propagate everywhere.
   ============================================================ */

:root {

  /* ─────────────────────────────────────────────────────
     COLORS — Backgrounds
  ───────────────────────────────────────────────────── */
  --bg:        #FFFFFF;
  --bg-soft:   #F6F6F6;
  --bg-mid:    #EFEFEF;
  --bg-str:    #E4E4E4;
  --bg-dark:   #1C1C1C;    /* used in ~10% of sections */
  --bg-darker: #111111;    /* footer / hero overlay */

  /* ─────────────────────────────────────────────────────
     COLORS — Text
  ───────────────────────────────────────────────────── */
  --tx-head:  #2D2D2D;     /* all headings */
  --tx-body:  #4C4C4C;     /* body copy */
  --tx-muted: #888888;     /* labels, metadata */
  --tx-faint: #BBBBBB;     /* disabled / decorative */
  --tx-inv:   #FFFFFF;     /* text on dark */

  /* ─────────────────────────────────────────────────────
     COLORS — Brand Amber (single accent, use sparingly)
  ───────────────────────────────────────────────────── */
  --amber:       #F3B007;
  --amber-dk:    #D49A06;                   /* hover state */
  --amber-xdk:   #B8860B;                   /* active / pressed */
  --amber-a08:   rgba(243, 176, 7, 0.08);   /* tint bg */
  --amber-a15:   rgba(243, 176, 7, 0.15);   /* medium tint */
  --amber-a35:   rgba(243, 176, 7, 0.35);   /* strong tint */

  /* ─────────────────────────────────────────────────────
     COLORS — Borders
  ───────────────────────────────────────────────────── */
  --br-lt:  #F0F0F0;
  --br-mid: #E0E0E0;
  --br-str: #CCCCCC;

  /* ─────────────────────────────────────────────────────
     TYPOGRAPHY — Families
  ───────────────────────────────────────────────────── */
  --f-d: 'Rajdhani', Arial, sans-serif;             /* Display / H1-H2 */
  --f-b: 'Rubik', 'Helvetica Neue', sans-serif;     /* Body / UI text */
  --f-m: 'IBM Plex Mono', 'Courier New', monospace; /* Data / Metrics */

  /* ─────────────────────────────────────────────────────
     TYPOGRAPHY — Scale (rem)
  ───────────────────────────────────────────────────── */
  --fs-10: 0.625rem;   /* 10px */
  --fs-11: 0.6875rem;  /* 11px */
  --fs-12: 0.75rem;    /* 12px */
  --fs-13: 0.8125rem;  /* 13px */
  --fs-14: 0.875rem;   /* 14px */
  --fs-15: 0.9375rem;  /* 15px */
  --fs-16: 1rem;       /* 16px */
  --fs-17: 1.0625rem;  /* 17px */
  --fs-18: 1.125rem;   /* 18px */
  --fs-20: 1.25rem;    /* 20px */
  --fs-22: 1.375rem;   /* 22px */
  --fs-24: 1.5rem;     /* 24px */
  --fs-28: 1.75rem;    /* 28px */
  --fs-32: 2rem;       /* 32px */
  --fs-36: 2.25rem;    /* 36px */
  --fs-40: 2.5rem;     /* 40px */
  --fs-48: 3rem;       /* 48px */
  --fs-56: 3.5rem;     /* 56px */
  --fs-64: 4rem;       /* 64px */
  --fs-72: 4.5rem;     /* 72px */
  --fs-80: 5rem;       /* 80px */
  --fs-96: 6rem;       /* 96px */

  /* ─────────────────────────────────────────────────────
     TYPOGRAPHY — Weight
  ───────────────────────────────────────────────────── */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ─────────────────────────────────────────────────────
     TYPOGRAPHY — Line height
  ───────────────────────────────────────────────────── */
  --lh-100: 1.0;
  --lh-110: 1.1;
  --lh-120: 1.2;
  --lh-130: 1.3;
  --lh-140: 1.4;
  --lh-150: 1.5;
  --lh-160: 1.6;
  --lh-170: 1.7;

  /* ─────────────────────────────────────────────────────
     TYPOGRAPHY — Letter spacing
  ───────────────────────────────────────────────────── */
  --ls-tight:   -0.03em;
  --ls-normal:   0em;
  --ls-wide:     0.05em;
  --ls-wider:    0.10em;
  --ls-widest:   0.15em;
  --ls-eyebrow:  0.18em;

  /* ─────────────────────────────────────────────────────
     SPACING — base-4 scale
  ───────────────────────────────────────────────────── */
  --sp-2:  0.125rem;   /* 2px */
  --sp-4:  0.25rem;    /* 4px */
  --sp-6:  0.375rem;   /* 6px */
  --sp-8:  0.5rem;     /* 8px */
  --sp-10: 0.625rem;   /* 10px */
  --sp-12: 0.75rem;    /* 12px */
  --sp-14: 0.875rem;   /* 14px */
  --sp-16: 1rem;       /* 16px */
  --sp-20: 1.25rem;    /* 20px */
  --sp-24: 1.5rem;     /* 24px */
  --sp-28: 1.75rem;    /* 28px */
  --sp-32: 2rem;       /* 32px */
  --sp-36: 2.25rem;    /* 36px */
  --sp-40: 2.5rem;     /* 40px */
  --sp-48: 3rem;       /* 48px */
  --sp-56: 3.5rem;     /* 56px */
  --sp-64: 4rem;       /* 64px */
  --sp-80: 5rem;       /* 80px */
  --sp-96: 6rem;       /* 96px */
  --sp-112:7rem;       /* 112px */
  --sp-128:8rem;       /* 128px */

  /* ─────────────────────────────────────────────────────
     LAYOUT
  ───────────────────────────────────────────────────── */
  --w-container:  1200px;
  --w-wide:       1440px;
  --w-narrow:     800px;
  --w-xnarrow:    640px;
  --gutter:       clamp(1rem, 4vw, 1.5rem);

  --topbar-h:   40px;
  --nav-h:      72px;
  --nav-total:  112px;   /* topbar + nav */
  --nav-current: var(--nav-total); /* updated by nav.js when topbar collapses */

  --section-py: clamp(3.5rem, 8vw, 7rem);

  /* ─────────────────────────────────────────────────────
     BORDER RADIUS
  ───────────────────────────────────────────────────── */
  --r-2:    2px;
  --r-4:    4px;
  --r-6:    6px;
  --r-8:    8px;
  --r-12:   12px;
  --r-16:   16px;
  --r-24:   24px;
  --r-full: 9999px;

  /* ─────────────────────────────────────────────────────
     SHADOWS
  ───────────────────────────────────────────────────── */
  --sh-xs:    0 1px 3px rgba(0,0,0,0.04);
  --sh-sm:    0 2px 8px rgba(0,0,0,0.06);
  --sh-md:    0 4px 20px rgba(0,0,0,0.08);
  --sh-lg:    0 8px 36px rgba(0,0,0,0.10);
  --sh-xl:    0 16px 48px rgba(0,0,0,0.12);
  --sh-2xl:   0 24px 64px rgba(0,0,0,0.15);
  --sh-card:  0 2px 12px rgba(0,0,0,0.06), 0 6px 24px rgba(0,0,0,0.07);
  --sh-amber: 0 8px 32px rgba(243,176,7,0.30);

  /* ─────────────────────────────────────────────────────
     TRANSITIONS & EASING
  ───────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --t-100: 100ms;
  --t-200: 200ms;
  --t-300: 300ms;
  --t-400: 400ms;
  --t-500: 500ms;
  --t-600: 600ms;
  --t-800: 800ms;
  --t-1000:1000ms;
  --t-1200:1200ms;
  --t-1500:1500ms;

  /* ─────────────────────────────────────────────────────
     Z-INDEX — explicit scale
  ───────────────────────────────────────────────────── */
  --z-base:    1;
  --z-float:   10;
  --z-sticky:  20;
  --z-drop:    50;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-loader:  400;
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE TOKEN OVERRIDES
───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --section-py: clamp(3rem, 7vw, 5rem);
  }
}

/* Topbar is display:none at ≤900px — update totals accordingly */
@media (max-width: 900px) {
  :root {
    --nav-total:   var(--nav-h);   /* 72px — topbar not shown */
    --nav-current: var(--nav-h);
  }
}

@media (max-width: 768px) {
  :root {
    --nav-h:      64px;
    --topbar-h:   0px;
    --nav-total:  64px;
    --section-py: clamp(2.5rem, 6vw, 3.5rem);
    --gutter:     1rem;
  }
}