/* ============================================================
   mayonaka · world.css — token layer, phase 0 starter
   ------------------------------------------------------------
   Copied verbatim from the design system's tokens/ on 2026-08-19:
     D:/DESIGN/Mayonaka Design System/tokens/
   Files, in the DS's own import order: fonts.css, colors.css, typography.css, spacing.css, effects.css
   Source of truth is still D:/DESIGN — re-read SKILL.md / readme /
   tokens there before building. Resets, base layouts and component
   CSS were deliberately NOT copied: layout is this world's own job.

   Google Fonts @import lines were removed (rule: fonts are self-hosted,
   see docs/04-world-contract.md §fonts). The families each token file
   expected are listed right where the import used to be.
   ============================================================ */

/* ---------- tokens/fonts.css ---------- */
/* Google Fonts — substituted for "ideal" pixel + JP pixel + retro mono.
   Flagged in README: swap with self-hosted webfonts if licensing matters. */
/* [phase-0] Google Fonts import removed. Self-host these families
   (see docs/04-world-contract.md §fonts): Press Start 2P, VT323, DotGothic16, Major Mono Display */

:root {
  /* English pixel display — chunky 8-bit */
  --font-display: "Press Start 2P", "DotGothic16", monospace;
  /* Japanese + body pixel — readable bitmap */
  --font-jp: "DotGothic16", "Press Start 2P", monospace;
  /* Body / terminal — CRT-style mono */
  --font-body: "VT323", "DotGothic16", monospace;
  /* Decorative — retro futurism nameplate */
  --font-nameplate: "Major Mono Display", "VT323", monospace;
}

/* ---------- tokens/colors.css ---------- */
:root {
  /* === Base palette — Vaporwave Midnight === */
  --void:        #07000f;   /* deepest, true background */
  --midnight:    #100225;   /* primary surface */
  --aubergine:   #1c0838;   /* raised surface */
  --plum:        #2d0a55;   /* card / panel */
  --orchid:      #4a1a8a;   /* hover surface */

  --magenta:     #ff2bd6;   /* primary accent */
  --hot-pink:    #ff71ce;   /* secondary pink */
  --cyan:        #19e6ff;   /* primary cool accent */
  --aqua:        #00fff0;   /* electric edge */
  --lavender:    #b59cff;   /* soft accent */
  --violet:      #8a2be2;   /* deep accent */
  --sunset:      #f97e72;   /* citypop sunset glow */
  --amber:       #ffcc66;   /* warm point */

  /* Blue family — secondary spine of the system */
  --electric:    #2d6cff;   /* primary blue — bold, CRT */
  --azure:       #4aa3ff;   /* lighter accent */
  --neon-blue:   #00b3ff;   /* glowing edge */
  --deep-blue:   #0a1654;   /* deep surface tint */
  --indigo:      #3a1a8a;   /* between plum + blue */

  --chrome:      #f0eaff;   /* near-white text */
  --silver:      #c8bce0;   /* muted text */
  --dusk:        #7a6ba0;   /* low-emphasis */
  --shadow-ink:  #03000a;   /* shadow base */

  /* Semantic — light / "dark mode by default" */
  --bg-void:     var(--void);
  --bg-base:     var(--midnight);
  --bg-raised:   var(--aubergine);
  --bg-card:     var(--deep-blue);
  --bg-hover:    var(--indigo);

  --text-primary:   var(--chrome);
  --text-secondary: var(--silver);
  --text-muted:     var(--dusk);
  --text-accent:    var(--magenta);
  --text-link:      var(--azure);

  --border-default: rgba(74, 163, 255, 0.28);
  --border-strong:  rgba(255, 43, 214, 0.6);
  --border-cyan:    rgba(25, 230, 255, 0.55);
  --border-blue:    rgba(45, 108, 255, 0.6);

  --accent-primary:   var(--magenta);
  --accent-secondary: var(--electric);
  --accent-tertiary:  var(--cyan);
  --accent-support:   var(--violet);
  --accent-warm:      var(--sunset);

  --success: #6dffb5;
  --warning: var(--amber);
  --danger:  #ff3860;

  /* Signature gradients */
  --grad-sunset: linear-gradient(180deg, #0a1654 0%, #3a1a8a 30%, #ff2bd6 70%, #ff71ce 100%); /* @kind color */
  --grad-neon:   linear-gradient(90deg, var(--magenta) 0%, var(--hot-pink) 35%, var(--electric) 70%, var(--neon-blue) 100%); /* @kind color */
  --grad-night:  linear-gradient(180deg, var(--void) 0%, var(--deep-blue) 60%, var(--midnight) 100%); /* @kind color */
  --grad-grid:   linear-gradient(180deg, transparent 60%, var(--magenta) 100%); /* @kind color */
  --grad-cyber:  linear-gradient(135deg, #0a1654 0%, #2d6cff 35%, #ff2bd6 75%, #ff71ce 100%); /* @kind color */
  --grad-trans:  linear-gradient(90deg, var(--electric) 0%, var(--magenta) 50%, var(--hot-pink) 100%); /* @kind color */
  --grad-bipolar: linear-gradient(135deg, var(--electric) 0%, var(--neon-blue) 35%, var(--hot-pink) 65%, var(--magenta) 100%); /* @kind color */
}

/* ---------- tokens/typography.css ---------- */
:root {
  /* Pixel fonts read smaller — start at 12 / 14 not 16. */
  --fs-xs:   10px;
  --fs-sm:   12px;
  --fs-md:   14px;
  --fs-lg:   18px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  48px;
  --fs-4xl:  72px;
  --fs-hero: 112px;

  --lh-tight: 1.1; /* @kind other */
  --lh-snug:  1.3; /* @kind other */
  --lh-body:  1.5; /* @kind other */
  --lh-loose: 1.8; /* @kind other */

  /* Pixel fonts shine with extra tracking */
  --tracking-tight:  0em;       /* @kind other */
  --tracking-normal: 0.04em;    /* @kind other */
  --tracking-wide:   0.12em;    /* @kind other */
  --tracking-mega:   0.3em;     /* @kind other */

  /* Semantic roles */
  --text-hero:    var(--font-display);
  --text-display: var(--font-display);
  --text-body:    var(--font-body);
  --text-jp:      var(--font-jp);
  --text-mono:    var(--font-body);
  --text-nameplate: var(--font-nameplate);
}

/* Pixel fonts MUST disable smoothing or they look mushy */
html, body {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  image-rendering: pixelated;
}

/* ---------- tokens/spacing.css ---------- */
:root {
  /* 4px base — but UIs often snap to 8px pixel grid */
  --s-0:  0; /* @kind spacing */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Radii — pixel UI is mostly SHARP. Use small radii sparingly. */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;

  /* Border widths — 2px is the pixel default */
  --bw-hair:   1px;
  --bw-default: 2px;
  --bw-bold:   3px;
  --bw-chonk:  4px;
}

/* ---------- tokens/effects.css ---------- */
:root {
  /* Glow shadows — the signature lighting of the system */
  --glow-magenta-sm: 0 0 8px rgba(255, 43, 214, 0.6);
  --glow-magenta:    0 0 16px rgba(255, 43, 214, 0.8), 0 0 32px rgba(255, 43, 214, 0.35);
  --glow-magenta-lg: 0 0 24px rgba(255, 43, 214, 0.9), 0 0 60px rgba(255, 43, 214, 0.4);
  --glow-cyan-sm:    0 0 8px rgba(25, 230, 255, 0.6);
  --glow-cyan:       0 0 16px rgba(25, 230, 255, 0.8), 0 0 32px rgba(25, 230, 255, 0.35);
  --glow-cyan-lg:    0 0 24px rgba(25, 230, 255, 0.9), 0 0 60px rgba(25, 230, 255, 0.4);
  --glow-blue-sm:    0 0 8px rgba(45, 108, 255, 0.7);
  --glow-blue:       0 0 16px rgba(45, 108, 255, 0.85), 0 0 32px rgba(0, 179, 255, 0.4);
  --glow-blue-lg:    0 0 24px rgba(45, 108, 255, 0.95), 0 0 60px rgba(0, 179, 255, 0.5);

  /* "Drop into the void" hard shadow — pixel-style, no blur */
  --shadow-pixel-sm: 2px 2px 0 var(--shadow-ink);
  --shadow-pixel:    4px 4px 0 var(--shadow-ink);
  --shadow-pixel-lg: 6px 6px 0 var(--shadow-ink);
  /* Colored pixel shadows for buttons */
  --shadow-pixel-magenta: 4px 4px 0 var(--magenta);
  --shadow-pixel-cyan:    4px 4px 0 var(--cyan);
  --shadow-pixel-blue:    4px 4px 0 var(--electric);

  /* Text glow */
  --text-glow-magenta: 0 0 6px rgba(255, 43, 214, 0.9), 0 0 14px rgba(255, 43, 214, 0.5);
  --text-glow-cyan:    0 0 6px rgba(25, 230, 255, 0.9), 0 0 14px rgba(25, 230, 255, 0.5);
  --text-glow-blue:    0 0 6px rgba(45, 108, 255, 0.95), 0 0 14px rgba(0, 179, 255, 0.55);

  /* Scanlines — overlay on top of everything cinematic */
  --scanlines: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.25) 3px,
    rgba(0,0,0,0.25) 4px
  ); /* @kind other */

  /* Grid floor — the iconic vaporwave perspective grid */
  --grid-floor: linear-gradient(transparent 0, transparent 95%, var(--magenta) 95%, var(--magenta) 100%),
                linear-gradient(90deg, transparent 0, transparent 95%, var(--magenta) 95%, var(--magenta) 100%); /* @kind other */

  /* Motion — kept restrained per brand */
  --ease-pixel: steps(6, end);            /* @kind other */
  --ease-smooth: cubic-bezier(.2,.7,.2,1); /* @kind other */
  --dur-fast: 120ms;                       /* @kind other */
  --dur-med:  240ms;                       /* @kind other */
  --dur-slow: 480ms;                       /* @kind other */
}

/* === Keyframes — restrained, ambient motion === */
@keyframes mnk-pulse-magenta {
  0%, 100% { box-shadow: 0 0 12px rgba(255,43,214,.55), 0 0 24px rgba(255,43,214,.25); }
  50%      { box-shadow: 0 0 22px rgba(255,43,214,.9),  0 0 52px rgba(255,43,214,.5); }
}
@keyframes mnk-pulse-cyan {
  0%, 100% { box-shadow: 0 0 12px rgba(25,230,255,.55), 0 0 24px rgba(25,230,255,.25); }
  50%      { box-shadow: 0 0 22px rgba(25,230,255,.9),  0 0 52px rgba(25,230,255,.5); }
}
@keyframes mnk-pulse-blue {
  0%, 100% { box-shadow: 0 0 12px rgba(45,108,255,.55),  0 0 24px rgba(0,179,255,.25); }
  50%      { box-shadow: 0 0 24px rgba(45,108,255,.95), 0 0 52px rgba(0,179,255,.55); }
}
@keyframes mnk-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.4; }
}
@keyframes mnk-scanline-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 8px; }
}
@keyframes mnk-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes mnk-glitch-shake {
  0%, 92%, 100% { transform: translate(0,0); }
  93% { transform: translate(-2px, 1px); }
  95% { transform: translate(2px, -1px); }
  97% { transform: translate(-1px, -2px); }
  99% { transform: translate(1px, 1px); }
}
@keyframes mnk-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes mnk-sun-spin {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}


/* ============================================================
   phase-0 stage — REPLACE in phase 1
   The shell morphs the console monitor into .yo-stage. Keep the
   stage exactly one viewport (position: fixed; inset: 0) and let
   the world scroll inside it if it scrolls at all.
   ============================================================ */
html { background: var(--bg-void); }
.yo-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
}
/* the return key in this world's material — this is only the neutral default */
.yo-return { color: var(--text-primary); }