/* ══════════════════════════════════════════════════════════════════
   OKKAI · Global stylesheet
   Loaded on every page. Holds the design-system TOKENS (typography)
   plus base element styles and reusable typography utility classes.
   ══════════════════════════════════════════════════════════════════ */

/* ── Fonts ──────────────────────────────────────────────────────────
   Clash Grotesk (Fontshare) is the site-wide default.
   Weights: 200 · 300 · 400 · 500 · 600 · 700 */
@import url('https://api.fontshare.com/v2/css?f[]=clash-grotesk@200,300,400,500,600,700&display=swap');
/* Poppins (Google) — the cookie-consent banner is drawn in it in Figma.
   Weights: 400 · 500 · 600 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* ══ TYPOGRAPHY TOKENS ══════════════════════════════════════════════
   Single source of truth for all type. Reference these everywhere as
   var(--fs-…), var(--fw-…), var(--lh-…), var(--tracking-…),
   var(--font-…). Never hard-code px/weights in component CSS.

   To ADD A NEW TYPEFACE later:
     1) @import (or @font-face) it above.
     2) Add a family token, e.g.  --font-display: 'New Face', …;
     3) Point a role at it, e.g.  --font-heading: var(--font-display);
   Nothing else needs to change — every heading updates automatically. */
:root {
  /* Font families ------------------------------------------------- */
  --font-primary: 'Clash Grotesk', system-ui, -apple-system, sans-serif;
  /* Handwriting face — for scrawled/note UI (added for the "Packing Panic" note) */
  --font-script:  'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
  /* Grotesque face — cookie consent banner (its own face in the Figma file) */
  --font-poppins: 'Poppins', system-ui, -apple-system, sans-serif;
  /* Semantic family roles (swap these to introduce a new face) */
  --font-heading: var(--font-primary);
  --font-body:    var(--font-primary);
  --font-ui:      var(--font-primary);

  /* Font weights -------------------------------------------------- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Type scale (rem; 1rem = 16px) --------------------------------- */
  --fs-2xs: 0.75rem;   /* 12px */
  --fs-xs:  0.875rem;  /* 14px */
  --fs-sm:  1rem;      /* 16px  ← body base */
  --fs-md:  1.125rem;  /* 18px */
  --fs-lg:  1.25rem;   /* 20px */
  --fs-xl:  1.5rem;    /* 24px */
  --fs-2xl: 1.75rem;   /* 28px */
  --fs-3xl: 2rem;      /* 32px */
  --fs-4xl: 2.5rem;    /* 40px */
  --fs-5xl: 3rem;      /* 48px */

  /* Line heights -------------------------------------------------- */
  --lh-none:    1;
  --lh-tight:   1.15;  /* large display headings */
  --lh-snug:    1.25;  /* headings / titles */
  --lh-normal:  1.45;  /* body copy */
  --lh-relaxed: 1.55;  /* long-form paragraphs */

  /* Letter spacing (tracking) ------------------------------------- */
  --tracking-tight:  -0.01em;  /* big headings */
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* eyebrows / small caps labels */
}

/* ══ COLOR TOKENS ═══════════════════════════════════════════════════
   Two tiers: raw PRIMITIVES (the palette) → SEMANTIC roles (use these).
   Reference semantic tokens (or the app aliases below) in component CSS;
   avoid raw hex. SVG icon "ink" uses currentColor driven by these too.

   To RE-THEME: change a primitive value, or repoint a semantic token
   at a different primitive — every usage updates automatically. */
:root {
  /* Primitives — neutral ramp -------------------------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F6F4;
  --neutral-100: #E9E9E6;
  --neutral-200: #D2D2D2;
  --neutral-300: #B3B3B3;
  --neutral-400: #6B6B6B;
  --neutral-500: #565656;
  --neutral-600: #4A4A4A;
  --neutral-700: #333333;
  --neutral-800: #262626;
  --neutral-900: #1C1C1E;
  --neutral-950: #000000;
  --cream:       #FFFFF9;  /* off-white text on dark surfaces */

  /* Primitives — brand -------------------------------------------- */
  --brand-500: #6C7BFF;    /* Aura Blue — primary brand accent */
  --brand-300: #B8C2F4;    /* light periwinkle */
  --brand-soft: #B7B2F0;   /* lavender (footer watermark) */

  /* Semantic roles ------------------------------------------------- */
  --color-bg:                  var(--neutral-0);
  --color-bg-subtle:           var(--neutral-50);
  --color-surface:             var(--neutral-0);
  --color-border:              var(--neutral-200);
  --color-hairline:            var(--neutral-100);
  --color-text:                var(--neutral-900);   /* primary text / headings */
  --color-text-strong:         var(--neutral-700);   /* strong secondary (tags) */
  --color-heading-muted:       var(--neutral-600);   /* footer headers / company */
  --color-text-secondary:      var(--neutral-500);   /* body / paragraphs */
  --color-text-muted:          var(--neutral-400);   /* meta / dates */
  --color-accent:              var(--brand-500);
  --color-accent-soft:         var(--brand-soft);
  --color-on-dark:             var(--cream);
  --color-overlay-text:        var(--neutral-0);
  --color-overlay-text-muted:  rgba(255, 255, 255, 0.85);
  --color-icon:                var(--color-text);

  /* App aliases (back-compat names used across pages) -------------- */
  --bg:            var(--color-bg);
  --text:          var(--color-text);
  --muted:         var(--color-text-muted);
  --accent:        var(--color-accent);
  --divider:       var(--color-text-secondary);
  --tag-border:    var(--color-border);
  --tag-text:      var(--color-text-strong);
  --dot-inactive:  var(--color-border);
  --overlay-text:  var(--color-overlay-text);
  --overlay-sub:   var(--color-overlay-text-muted);
  --polaroid:      var(--neutral-0);
}

/* ── Base ───────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* On dark sections, text uses the off-white. */
.on-dark { color: var(--color-on-dark); }

/* Shared icon color roles (SVGs use stroke/fill="currentColor") */
.footer-row svg     { color: var(--color-heading-muted); }
.footer-socials svg { color: var(--color-text); }

/* ══ TYPOGRAPHY UTILITY CLASSES ═════════════════════════════════════
   Semantic roles composed from the tokens above. Prefer these on new
   markup; existing components reference the raw tokens directly. */
.type-display {                        /* hero / page H1 */
  font-family: var(--font-heading);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.type-h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.type-h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}
.type-title {                          /* card / block title */
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}
.type-lead {                           /* large intro / subtitle */
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}
.type-body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}
.type-body {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}
.type-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}
.type-caption {                        /* dates / meta */
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-none);
}
.type-eyebrow {                        /* small tracked label */
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.type-nav,
.type-button {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
}