/* =============================================================
   AKU WORLD — DESIGN TOKENS
   Edit this file to change the look globally. One source of truth
   for color, type, spacing, motion. styles.css consumes these vars.
   v0.1 — aku.world home
   ============================================================= */

/* ---------- FONT FACES ---------- */
@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:'Aku Brushstroke'; font-weight:400; font-style:normal;
  src:url('../fonts/AkuBrushstroke-Regular.ttf') format('truetype'); font-display:swap; }
/* Body (DM Sans) + HUD mono (Share Tech Mono) loaded via <link> in index.html */

:root{
  /* ---------- COLOR ----------
     Warm-paper base (2026 "Cloud Dancer" premium neutral) + ink + ibra blue.
     Change --paper / --blue here to re-skin the whole site. */
  --paper:        #FBF8F2;   /* warm off-white base surface            */
  --paper-2:      #F4EFE6;   /* slightly deeper paper (alt sections)   */
  --bone:         #ECE6DA;   /* card tint / hairline fills             */
  --ink:          #141414;   /* primary text                          */
  --ink-2:        #3A3733;   /* body text                             */
  --ink-3:        #6B6660;   /* meta / tertiary                       */
  --line:         rgba(20,20,20,.12);  /* hairlines                   */
  --line-2:       rgba(20,20,20,.22);  /* stronger hairlines          */

  --blue:         #1355B9;   /* ibra blue — primary accent            */
  --blue-deep:    #0B2B6B;   /* dark hero surface                     */
  --blue-night:   #061A44;   /* darkest — hero base                   */
  --blue-glow:    #3FB4FF;   /* visor glow / HUD accent on dark       */
  --cyan:         #9FE3FF;   /* HUD hairline cyan (on dark only)      */
  --yellow:       #FFD23F;   /* solar accent (sparingly)              */
  --red:          #E13D35;   /* mars (sparingly / "live" dots)        */

  /* Semantic */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --accent:       var(--blue);
  --focus:        var(--blue);

  /* ---------- TYPE ---------- */
  --display: 'Nostromo','Arial Black',sans-serif;  /* headlines, numbers */
  --hand:    'Aku Brushstroke','Bradley Hand',cursive; /* eyebrows */
  --mono:    'Share Tech Mono',ui-monospace,'SFMono-Regular',monospace; /* HUD labels */
  --body:    'DM Sans','Inter',system-ui,sans-serif; /* prose, UI */

  /* Fluid type scale (clamp = min, preferred, max) */
  --t-hero:   clamp(3.2rem, 13vw, 11rem);   /* the I AM AKU headline */
  --t-h1:     clamp(2.2rem, 6vw, 4.6rem);
  --t-h2:     clamp(1.6rem, 3.6vw, 2.8rem);
  --t-h3:     clamp(1.05rem, 1.6vw, 1.3rem);
  --t-lede:   clamp(1.05rem, 1.5vw, 1.4rem);
  --t-body:   1.0625rem;
  --t-label:  0.6875rem;   /* 11px mono labels */
  --t-meta:   0.75rem;

  /* ---------- SPACING / LAYOUT ---------- */
  --wrap:       1180px;   /* max content width */
  --wrap-text:  720px;    /* readable measure  */
  --gut:        clamp(20px, 5vw, 64px); /* page gutter */
  --section-y:  clamp(64px, 11vh, 150px); /* vertical rhythm between sections */
  --radius:     18px;     /* bento / card rounding (2026 = generous) */
  --radius-sm:  10px;

  /* ---------- MOTION ---------- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur:       .55s;
  --dur-fast:  .25s;

  --shadow-card: 0 1px 0 var(--line), 0 18px 40px -24px rgba(20,20,20,.35);
  --shadow-pop:  0 30px 60px -30px rgba(20,20,20,.45);
}