/* ==========================================================================
   Xafethy Design Tokens — v1.0
   Derived from docs/xafethy_website_brand_aligned.html, formalized.
   Rule: components reference SEMANTIC tokens (--color-*, --text-*, --space-*).
   Primitives (--gold-500, --ink-900 …) exist only to build the semantic layer.
   ========================================================================== */

:root {
  /* ---------- Primitives: brand ---------- */
  --gold-300: #ecdca6;   /* highlight, gold rule on dark at low opacity  */
  --gold-400: #e6d190;   /* hover state of gold fills                    */
  --gold-500: #dec474;   /* BRAND accent (was --orange in the example)   */
  --gold-600: #a08a3f;   /* accent for LARGE text (≥24px) on light: 3.4:1 */
  --gold-700: #7d651f;   /* accent for small text on light: 5.6:1 AA     */
  --steel-500: #8a939c;  /* logo steel grey — decorative use only         */

  /* ---------- Primitives: neutrals (cool, blue-biased) ---------- */
  --ink-950: #050505;    /* footer                                        */
  --ink-900: #0b0b0c;    /* dark sections (hero base, ISO)                */
  --ink-800: #111315;    /* CTA band, raised dark surface                 */
  --ink-700: #1a1d20;    /* body text on light                            */
  --ink-600: #30343a;    /* dividers on dark                              */
  --ink-500: #4d535a;    /* outline button border on dark                 */
  --steel-400: #656d76;  /* muted text on light (4.6:1 on mist-100)       */
  --steel-300: #8f9ba5;  /* footer links on dark                          */
  --steel-200: #aeb9c2;  /* secondary text on dark                        */
  --steel-100: #cbd3d9;  /* lede text on dark                             */
  --mist-300: #dfe5ea;   /* nav links on dark                             */
  --mist-200: #d8dce0;   /* dividers on light                             */
  --mist-100: #f3f4f5;   /* alternate light section                       */
  --mist-50:  #f7f8f9;   /* quiet light section                           */
  --white:    #ffffff;

  /* ---------- Semantic: surfaces ---------- */
  --surface-page:        var(--white);
  --surface-alt:         var(--mist-100);
  --surface-quiet:       var(--mist-50);
  --surface-dark:        var(--ink-900);
  --surface-dark-raised: var(--ink-800);
  --surface-footer:      var(--ink-950);
  --surface-card:        var(--white);

  /* ---------- Semantic: text on LIGHT surfaces ---------- */
  --text-primary:   var(--ink-700);
  --text-muted:     var(--steel-400);
  --text-accent:    var(--gold-700);   /* kicker, numbers, "explore" links   */
  --text-accent-lg: var(--gold-600);   /* highlighted words inside headings  */

  /* ---------- Semantic: text on DARK surfaces ---------- */
  --text-on-dark:        var(--white);
  --text-on-dark-lede:   var(--steel-100);
  --text-on-dark-muted:  var(--steel-200);
  --text-on-dark-faint:  var(--steel-300);
  --text-on-dark-accent: var(--gold-500);

  /* ---------- Semantic: accent & lines ---------- */
  --accent:          var(--gold-500);
  --accent-hover:    var(--gold-400);
  --accent-ink:      #0b0b0b;                       /* text on gold fills */
  --line:            var(--mist-200);
  --line-on-dark:    var(--ink-600);
  --line-gold-soft:  rgba(222, 196, 116, .22);
  --line-white-soft: rgba(255, 255, 255, .15);

  /* ---------- Typography ---------- */
  --font-sans: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;

  --text-2xs: 11px;   /* kicker, eyebrow, labels          */
  --text-xs:  12px;   /* buttons, meta, footer            */
  --text-sm:  13px;   /* card & list body                 */
  --text-md:  15px;   /* tile titles, ISO codes           */
  --text-base:16px;   /* section lede                     */
  --text-lg:  18px;   /* hero lede, list item title       */
  --text-xl:  21px;   /* card title                       */
  --text-2xl: 28px;   /* sub-section heading              */
  --text-h2:  clamp(36px, 4vw, 54px);
  --text-h1:  clamp(48px, 6.2vw, 78px);

  --leading-tight: 0.98;   /* h1        */
  --leading-snug:  1.02;   /* h2        */
  --leading-title: 1.15;   /* h3        */
  --leading-body:  1.55;

  --tracking-display: -0.045em;
  --tracking-heading: -0.04em;
  --tracking-label:    0.18em;
  --tracking-button:   0.04em;
  --tracking-link:     0.10em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:650;
  --weight-bold:    700;
  --weight-black:   800;

  /* ---------- Spacing (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-18: 72px;
  --space-26: 104px;

  --section-y:        var(--space-26);
  --section-y-mobile: var(--space-18);
  --card-pad:         30px;
  --gutter:           48px;
  --gutter-mobile:    32px;

  /* ---------- Layout ---------- */
  --container-max: 1180px;
  --measure: 65ch;
  --nav-height: 92px;
  --logo-width: 225px;
  --logo-width-footer: 205px;
  --logo-width-mobile: 175px;

  /* ---------- Borders, radius, elevation ---------- */
  --radius: 0;                                   /* the brand is square — no rounding, anywhere */
  --border-w: 1px;
  --border-w-accent: 2px;
  --shadow-hover: 0 14px 35px rgba(10, 25, 38, .08);
  --shadow-none: none;

  /* ---------- Motion ---------- */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(.2, .6, .2, 1);
  --lift: -4px;

  /* ---------- Focus ---------- */
  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--gold-600);
  --focus-ring-on-dark: 0 0 0 2px var(--surface-dark), 0 0 0 4px var(--gold-500);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --lift: 0; }
}