/* =========================================================
   AKU — Colors & Type Tokens
   Source: Aku Brand Guidelines (Nov 2023) + uploaded assets.
   ========================================================= */

/* ---------- FONT FACES ---------- */

/* Headline / display — Nostromo (uploaded; substitute for Agrandir Grand) */
@font-face {
  font-family: 'Nostromo';
  font-weight: 500;
  font-style: normal;
  src: url('fonts/Nostromo-Medium.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Nostromo';
  font-weight: 800;
  font-style: normal;
  src: url('fonts/Nostromo-Heavy.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Nostromo';
  font-weight: 900;
  font-style: normal;
  src: url('fonts/Nostromo-Black.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Nostromo Outline';
  font-weight: 900;
  font-style: normal;
  src: url('fonts/Nostromo-BlackOutline.otf') format('opentype');
  font-display: swap;
}

/* Eyebrow / accent — Aku Brushstroke (hand, custom) */
@font-face {
  font-family: 'Aku Brushstroke';
  font-weight: 400;
  font-style: normal;
  src: url('fonts/AkuBrushstroke-Regular.ttf') format('truetype');
  font-display: swap;
}

/* Body / UI — Google Fonts DM Sans (recommended pairing: geometric
   but friendly, neutral companion to Nostromo + Brushstroke).
   Imported here so consumers only need this one CSS file. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---------- COLOR PALETTE ----------
   Named per brand: Starlight, Mars, Galaxy, Deep, Energy, Cosmos, Grey.
   From PDF p.27. */
:root {
  /* ---------- NEW CORE PALETTE (Journey to Ibra direction) ----------
     Anchored on the book-cover blues + HUD white. Feels like a space suit
     HUD — Tom Sachs spray-stencil meets KAWS flatness meets Apple restraint. */
  --aku-blue-ibra:        #1355B9;  /* Primary brand blue (MLB card field) */
  --aku-blue-deep:        #0B2B6B;  /* Dreamgazer certificate navy */
  --aku-blue-night:       #061A44;  /* Darkest — HUD background */
  --aku-blue-glow:        #3FB4FF;  /* Helmet visor glow / HUD accent */
  --aku-cyan-hud:         #9FE3FF;  /* Barcode cyan / hairline rules */

  /* Retained accents — still part of the system, used sparingly */
  --aku-yellow-solar:     #FFD23F;  /* v2: primary yellow, richer than Starlight */
  --aku-yellow-starlight: #FFEAA7;  /* soft secondary yellow (PDF) */
  --aku-red-mars:         #E13D35;
  --aku-green-energy:     #03E9A4;
  --aku-pink-cosmos:      #F5D9E1;
  --aku-grey-deep:        #141414;
  --aku-white:            #FFFFFF;

  /* Legacy token kept for back-compat — now aliased to Ibra blue */
  --aku-blue-galaxy:      var(--aku-blue-ibra);

  /* Derived tints / shades for UI states.
     Generated with oklch to stay tonally consistent with the brand hues. */
  --aku-blue-ibra-600:    oklch(from var(--aku-blue-ibra) calc(l * 0.88) c h);
  --aku-blue-ibra-400:    oklch(from var(--aku-blue-ibra) calc(l * 1.18) c h);
  --aku-blue-galaxy-600:  var(--aku-blue-ibra-600);
  --aku-blue-galaxy-400:  var(--aku-blue-ibra-400);
  --aku-red-mars-600:     oklch(from var(--aku-red-mars)    calc(l * 0.92) c h);
  --aku-green-energy-600: oklch(from var(--aku-green-energy) calc(l * 0.88) c h);
  --aku-yellow-600:       oklch(from var(--aku-yellow-starlight) calc(l * 0.95) c h);

  /* Neutrals (warm off-white → deep) */
  --aku-paper:      #FBF8F2;  /* warm paper, for kid-friendly backgrounds */
  --aku-ink-900:    #141414;
  --aku-ink-700:    #333333;
  --aku-ink-500:    #6B6B6B;
  --aku-ink-300:    #B5B5B5;
  --aku-ink-100:    #E8E6DF;

  /* ---------- SEMANTIC COLORS ---------- */
  --fg-1: var(--aku-ink-900);              /* primary text       */
  --fg-2: var(--aku-ink-700);              /* secondary text     */
  --fg-3: var(--aku-ink-500);              /* tertiary / meta    */
  --fg-on-dark: var(--aku-white);
  --fg-on-blue: var(--aku-white);
  --fg-on-yellow: var(--aku-grey-deep);
  --fg-on-pink: var(--aku-grey-deep);

  --bg-1: var(--aku-blue-ibra);            /* primary surface — BLUE */
  --bg-2: var(--aku-blue-deep);            /* elevated / card on blue */
  --bg-3: var(--aku-blue-night);           /* sunken / HUD chrome */
  --bg-paper: var(--aku-paper);            /* off-blue alt surface */
  --bg-inverse: var(--aku-white);

  --fg-1: var(--aku-white);                /* primary text on blue */
  --fg-2: rgba(255,255,255,.78);
  --fg-3: rgba(255,255,255,.55);
  --fg-hud: var(--aku-cyan-hud);           /* HUD labels / hairlines */

  --accent: var(--aku-blue-glow);          /* helmet-visor glow */
  --accent-contrast: var(--aku-white);
  --link: var(--aku-blue-galaxy);
  --focus-ring: var(--aku-blue-galaxy);

  --success: var(--aku-green-energy);
  --warning: var(--aku-yellow-starlight);
  --danger:  var(--aku-red-mars);

  --border: rgba(255,255,255, 0.18);
  --border-strong: rgba(255,255,255, 0.34);
  --divider: rgba(255,255,255, 0.12);
  --border-hud: var(--aku-cyan-hud);

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --font-display: 'Nostromo', 'Arial Black', 'Helvetica Neue', sans-serif;
  --font-display-outline: 'Nostromo Outline', 'Nostromo', sans-serif;
  --font-hand:    'Aku Brushstroke', 'Caveat', 'Comic Sans MS', cursive;
  --font-body:    'DM Sans', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-hud:     var(--font-mono);

  /* ---------- TYPE SCALE ----------
     Per PDF p.23, brand defines: Eyebrow, Header, Subheader, Body, UI.
     Extended here with a full display scale for web/app work. */
  --t-eyebrow-size:    1.25rem;   /* Aku Brushstroke, looser than PDF */
  --t-eyebrow-tracking: 0;

  --t-display-size:    clamp(3rem, 7vw, 6rem);
  --t-h1-size:         clamp(2.25rem, 5vw, 4rem);
  --t-h2-size:         2rem;      /* PDF "Header"     */
  --t-h3-size:         1.6rem;    /* PDF "Subheader"  */
  --t-h4-size:         1.25rem;
  --t-body-size:       1rem;      /* PDF "Body"       */
  --t-small-size:      0.875rem;
  --t-ui-size:         1rem;      /* PDF "UI" (all caps, tracked) */
  --t-caption-size:    0.75rem;

  --leading-tight:   1.05;        /* headers */
  --leading-snug:    1.1;         /* subheaders */
  --leading-normal:  1.3;         /* body */
  --leading-loose:   1.5;

  --tracking-ui:     0.12em;      /* PDF says 2% -> kept loose for UI labels */
  --tracking-tight:  -0.01em;

  /* ---------- SPACING (1:1 grid, per PDF p.43) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;   /* brand default margin for 16×9 (width × 0.2) */
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- RADII (Apple-ish, for kids — generous) ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(20,20,20,.06), 0 1px 1px rgba(20,20,20,.04);
  --shadow-2: 0 4px 10px rgba(20,20,20,.08), 0 2px 4px rgba(20,20,20,.05);
  --shadow-3: 0 12px 30px rgba(20,20,20,.12), 0 4px 10px rgba(20,20,20,.06);
  --shadow-pop: 0 10px 0 0 var(--aku-grey-deep);  /* chunky offset for kid-CTA blocks */

  /* ---------- MOTION ---------- */
  --ease-out-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-bounce:   cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 140ms;
  --dur-med:  240ms;
  --dur-slow: 420ms;
}

/* =========================================================
   SEMANTIC TYPE CLASSES
   Match the PDF's "Typographic Hierarchy" (p.23), extended.
   ========================================================= */

.eyebrow, [data-type="eyebrow"] {
  font-family: var(--font-hand);
  font-size: var(--t-eyebrow-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--accent);
}

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-display-size);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  letter-spacing: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-h1-size);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0 0 .4em;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-h2-size);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  margin: 0 0 .4em;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3-size);
  line-height: var(--leading-snug);
  text-transform: none;   /* PDF: Subheader uses sentence case */
  margin: 0 0 .4em;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-h4-size);
  line-height: var(--leading-snug);
  margin: 0 0 .4em;
}

p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body-size);
  line-height: var(--leading-normal);
  color: var(--fg-1);
}

small, .caption {
  font-family: var(--font-body);
  font-size: var(--t-caption-size);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

.ui-label, [data-type="ui"] {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-ui-size);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  line-height: 1;
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Hand-style callouts (Aku's inner world). */
.hand {
  font-family: var(--font-hand);
  font-weight: 400;
  line-height: 1.05;
}

/* =========================================================
   UTILITY SURFACES
   ========================================================= */
.bg-paper   { background: var(--aku-paper); color: var(--aku-grey-deep); }
.bg-white   { background: #fff; color: var(--aku-grey-deep); }
.bg-ink     { background: var(--aku-grey-deep); color: #fff; }
.bg-ibra    { background: var(--aku-blue-ibra); color: #fff; }
.bg-deep    { background: var(--aku-blue-deep); color: #fff; }
.bg-night   { background: var(--aku-blue-night); color: #fff; }
.bg-galaxy  { background: var(--aku-blue-ibra); color: #fff; }
.bg-mars    { background: var(--aku-red-mars); color: #fff; }
.bg-energy  { background: var(--aku-green-energy); color: var(--aku-grey-deep); }
.bg-starlight { background: var(--aku-yellow-starlight); color: var(--aku-grey-deep); }
.bg-solar     { background: var(--aku-yellow-solar); color: var(--aku-grey-deep); }
.bg-cosmos  { background: var(--aku-pink-cosmos); color: var(--aku-grey-deep); }

/* =========================================================
   HUD CHROME — stencils, hairlines, tally marks, barcodes.
   Apple-restraint + Tom Sachs engineering. Use sparingly.
   ========================================================= */
.hud-rule { height: 1px; background: var(--aku-cyan-hud); opacity: .5; }
.hud-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--aku-cyan-hud);
}
.hud-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border: 1px solid var(--aku-cyan-hud);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--aku-cyan-hud); border-radius: 3px;
}
.hud-tally { /* slanted tally-mark strip */
  height: 16px;
  background: repeating-linear-gradient(-60deg,
    var(--aku-cyan-hud) 0 2px, transparent 2px 10px);
  opacity: .9;
}
.hud-barcode {
  height: 36px;
  background: repeating-linear-gradient(90deg,
    var(--aku-cyan-hud) 0 3px, transparent 3px 5px,
    var(--aku-cyan-hud) 5px 6px, transparent 6px 11px,
    var(--aku-cyan-hud) 11px 14px, transparent 14px 17px);
}
.hud-crosshair {
  position: relative;
}
.hud-crosshair::before, .hud-crosshair::after {
  content: ''; position: absolute; background: var(--aku-cyan-hud);
}
.hud-crosshair::before { top: 50%; left: 0; right: 0; height: 1px; }
.hud-crosshair::after  { left: 50%; top: 0; bottom: 0; width: 1px; }