/* =============================================================
   SYNERAGARD 24 — Design Tokens
   The single place brand values live. Swap the hex values in
   --sg-blue / --sg-gold when the real logo colors are confirmed.
   ============================================================= */

:root {
  /* ---- Brand core (from Logo_sg24.png: gold #FDD203 + black) ---- */
  --sg-gold:        #FDD203;   /* primary brand gold (logo) — fills, bars, CTAs, dark-bg accents */
  --sg-gold-600:    #8A6A00;   /* accessible gold for TEXT/links/icons on light bg (WCAG AA: 5.07:1 on white) */
  --sg-gold-700:    #705700;   /* extra-dark gold for small text needing AAA-ish margin */
  --sg-gold-400:    #FFE04D;   /* light gold, hover on dark */
  --sg-gold-100:    #FFF6CC;   /* gold tint background */

  /* Primary dark = near-black. Names kept as --sg-blue-* so existing
     component CSS keeps working; values are now a warm-black scale. */
  --sg-black:       #0B0C0E;
  --sg-blue:        #0B0C0E;   /* alias: primary dark */
  --sg-blue-700:    #121316;
  --sg-blue-600:    #1B1D22;   /* hover on dark buttons */
  --sg-blue-500:    #2A2D34;
  --sg-blue-100:    #EDEDEF;
  --sg-blue-50:     #F6F6F4;   /* subtle warm tint used for hovers */

  /* ---- Neutrals ---- */
  --sg-white:       #FFFFFF;
  --sg-ink:         #0B1522;   /* near-black text */
  --sg-slate-800:   #1E2A3A;
  --sg-slate-600:   #45566B;
  --sg-slate-500:   #64748B;
  --sg-slate-400:   #94A3B8;
  --sg-slate-200:   #E2E8F0;
  --sg-slate-100:   #F1F5F9;
  --sg-slate-50:    #F8FAFC;

  --sg-success:     #1F9D6B;
  --sg-danger:      #C0392B;

  /* ---- Semantic ---- */
  --bg:             var(--sg-white);
  --bg-alt:         var(--sg-slate-50);
  --bg-dark:        var(--sg-blue);
  --surface:        var(--sg-white);
  --text:           var(--sg-ink);
  --text-muted:     var(--sg-slate-600);
  --text-on-dark:   #E9EEF5;
  --heading:        var(--sg-blue);
  --accent:         var(--sg-gold);
  --border:         var(--sg-slate-200);
  --ring:           color-mix(in srgb, var(--sg-gold) 55%, transparent);

  /* ---- Typography ----
     Deliberate native system-font stack: zero external requests (best
     for Lighthouse) and crisp platform rendering. To adopt a custom
     display font later, self-host it and prepend it to --font-display. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "Segoe UI", Tahoma, "Noto Kufi Arabic", system-ui, sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-xs:   0.8125rem;                         /* 13px */
  --fs-sm:   0.875rem;                          /* 14px */
  --fs-base: 1rem;                              /* 16px */
  --fs-lg:   1.125rem;                          /* 18px */
  --fs-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl:  clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-3xl:  clamp(1.9rem, 1.5rem + 1.9vw, 2.75rem);
  --fs-4xl:  clamp(2.35rem, 1.7rem + 3vw, 3.75rem);
  --fs-hero: clamp(2.6rem, 1.7rem + 4.4vw, 4.75rem);

  --lh-tight: 1.1;
  --lh-snug:  1.28;
  --lh-body:  1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

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

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --container: 1200px;
  --container-wide: 1360px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);

  /* ---- Radii ---- */
  --r-sm: 6px;  --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  /* ---- Shadows (soft, premium) ---- */
  --sh-xs: 0 1px 2px rgba(11, 12, 14, 0.06);
  --sh-sm: 0 2px 8px rgba(11, 12, 14, 0.08);
  --sh-md: 0 10px 30px -12px rgba(11, 12, 14, 0.20);
  --sh-lg: 0 24px 60px -20px rgba(11, 12, 14, 0.32);
  --sh-gold: 0 12px 30px -10px rgba(253, 210, 3, 0.42);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 520ms;

  /* ---- Layout ---- */
  --header-h: 84px;
  --z-header: 1000;
  --z-float: 900;
  --z-overlay: 1100;
}

/* Optional dark theme hook (toggle adds data-theme="dark" on <html>) */
:root[data-theme="dark"] {
  --bg:        #0A1420;
  --bg-alt:    #0E1B2B;
  --surface:   #10203247;
  --text:      #E9EEF5;
  --text-muted:#A7B4C4;
  --heading:   #FFFFFF;
  --border:    #22344A;
}