/* ==========================================================================
   L402 Lab — design tokens
   One source for colour, type, space, shape, shadow and motion.
   Components use the SEMANTIC tokens (--ink, --paper, --surface, --accent…).
   Rooms re-theme by overriding those same names on any [data-room] element:
   the <body> of a room page, or a single card that previews a room.
   ========================================================================== */

:root {
  /* ---- Fixed shell constants (never overridden by rooms) ---------------- */
  --c-ink: #1B1A2E;      /* deep indigo black: outlines, text, hard shadows */
  --c-paper: #F4F2FB;    /* pale lavender white: shell background */
  --c-white: #FFFFFF;    /* sticker card face */
  --c-sat: #FFD23F;      /* sat yellow: coins and prices only */
  --c-bolt: #FF7A1A;     /* lightning orange: the primary action */
  --c-web: #6C4BFF;      /* spider violet: links, 402 doors, 402 status */
  --c-mint: #3DDC97;     /* success / 200 */
  --c-coral: #FF5C8A;    /* errors / 401 / blocked */
  --c-sky: #8FD3FF;      /* info */
  --c-fog: #A9A5C2;      /* expired, locked, disabled */
  --c-night: #12112B;    /* inspector + agent drawer glass box */

  /* ---- Semantic colour (rooms override these) --------------------------- */
  --ink: var(--c-ink);              /* text + outlines */
  --ink-soft: #4A4766;              /* secondary text */
  --paper: var(--c-paper);          /* page background */
  --paper-dot: #DCD7F0;             /* background dot pattern colour */
  --surface: var(--c-white);        /* card face */
  --surface-2: #ECE8FA;             /* inset wells, code blocks on cards */
  --line: var(--ink);               /* 2px sticker outline colour */
  --shadow-color: var(--ink);       /* hard offset shadow colour */
  --accent: var(--c-web);           /* room accent (links, active nav) */
  --on-accent: #FFFFFF;             /* text on accent */
  --primary: var(--c-bolt);         /* primary button face */
  --on-primary: var(--c-ink);       /* text on primary */
  --sat: var(--c-sat);
  --bolt: var(--c-bolt);
  --web: var(--c-web);
  --mint: var(--c-mint);
  --coral: var(--c-coral);
  --sky: var(--c-sky);
  --fog: var(--c-fog);
  --door: var(--c-web);             /* 402 door leaf colour */
  --door-panel: #8A70FF;            /* door raised panels */

  /* Protocol status colours (inspector, chips, doors) */
  --st-402: var(--c-web);
  --st-200: var(--c-mint);
  --st-401: var(--c-coral);
  --st-expired: var(--c-fog);
  --st-info: var(--c-sky);

  /* ---- Type ------------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif; /* 800 only: H1/H2, the 402 */
  --font-body: "Nunito", ui-rounded, system-ui, sans-serif;                             /* 400 / 700 / 900 */
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;    /* protocol, prices */

  /* Fluid type scale: min at 360px, max at 1280px viewport */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);  /* micro labels */
  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);  /* small, mono */
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);  /* body */
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);  /* lead, card title */
  --step-2:  clamp(1.35rem, 1.20rem + 0.70vw, 1.80rem);  /* H3 */
  --step-3:  clamp(1.70rem, 1.40rem + 1.30vw, 2.50rem);  /* H2 */
  --step-4:  clamp(2.20rem, 1.70rem + 2.40vw, 3.70rem);  /* H1 room */
  --step-5:  clamp(2.60rem, 1.80rem + 3.80vw, 5.20rem);  /* hero */
  --step-6:  clamp(3.20rem, 2.20rem + 5.00vw, 6.60rem);  /* big 402 */
  --leading-tight: 0.95;
  --leading-snug: 1.2;
  --leading-body: 1.55;
  --tracking-display: -0.025em;

  /* ---- Space (4px base) ------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --gutter: clamp(16px, 4vw, 40px);  /* page side padding (16px at phone width) */
  --max-w: 1180px;                   /* content max width */

  /* ---- Shape: sticker book ---------------------------------------------- */
  --stroke: 2px;                   /* every outline */
  --radius-sm: 8px;                /* chips, inputs */
  --radius: 14px;                  /* stickers, buttons */
  --radius-lg: 22px;               /* big room cards */
  --radius-pill: 999px;
  --border: var(--stroke) solid var(--line);

  /* Hard offset shadows. They collapse toward the element on press. */
  --shadow-sm: 2px 2px 0 var(--shadow-color);
  --shadow: 4px 4px 0 var(--shadow-color);
  --shadow-lg: 7px 7px 0 var(--shadow-color);
  --shadow-press: 1px 1px 0 var(--shadow-color);
  --press-shift: translate(3px, 3px);   /* pair with --shadow-press */

  /* ---- Motion ----------------------------------------------------------- */
  --dur-1: 120ms;    /* press, hover */
  --dur-2: 220ms;    /* small reveals */
  --dur-3: 420ms;    /* drawers, coin drop */
  --dur-4: 800ms;    /* door swing */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* a little overshoot */
  --ease-bounce: cubic-bezier(0.5, 1.8, 0.5, 0.8);

  /* ---- Focus ------------------------------------------------------------ */
  --focus-ring: 0 0 0 3px var(--paper), 0 0 0 6px var(--c-web);

  /* ---- Layers ----------------------------------------------------------- */
  --z-header: 50;
  --z-tab: 70;
  --z-drawer: 80;
  --z-modal: 100;
  --z-toast: 120;

  color-scheme: light;
}

/* ==========================================================================
   Room themes. Same token names, new world.
   Use on <body data-room="…"> for a page, or on any element to scope a preview.
   ========================================================================== */

/* Spider Garden: night garden, violet glowing threads */
[data-room="garden"] {
  --paper: #12112B;
  --paper-dot: #252257;
  --surface: #1E1C45;
  --surface-2: #2A2760;
  --ink: #F4F2FB;
  --ink-soft: #B9B4DA;
  --line: #F4F2FB;
  --shadow-color: #6C4BFF;
  --accent: #A48FFF;
  --on-accent: #12112B;
  --door: #6C4BFF;
  --door-panel: #8A70FF;
  --focus-ring: 0 0 0 3px #12112B, 0 0 0 6px #FFD23F;
  color-scheme: dark;
}

/* Corkboard: cork, paper notes, tape, red pins */
[data-room="corkboard"] {
  --paper: #C98A4B;
  --paper-dot: #B5763A;
  --surface: #FFF8E1;
  --surface-2: #F6E9C3;
  --ink: #2A1C10;
  --ink-soft: #6B5038;
  --line: #2A1C10;
  --shadow-color: #2A1C10;
  --accent: #E8423F;
  --on-accent: #FFF8E1;
  --tape: #F4E7A1;
  --door: #6C4BFF;
  --door-panel: #8A70FF;
}

/* White Wolfe Spice Co.: cocoa, saffron, cream */
[data-room="spice"] {
  --paper: #2B1710;
  --paper-dot: #3C2218;
  --surface: #3B2218;
  --surface-2: #4A2C20;
  --ink: #F8E9D2;
  --ink-soft: #D9BFA0;
  --line: #F8E9D2;
  --shadow-color: #120804;
  --accent: #F2B134;
  --on-accent: #2B1710;
  --primary: #F2B134;
  --on-primary: #2B1710;
  --cream: #F8E9D2;
  --saffron: #F2B134;
  --door: #8C3B1E;
  --door-panel: #A9512C;
  --focus-ring: 0 0 0 3px #2B1710, 0 0 0 6px #F2B134;
  color-scheme: dark;
}

/* machine.market: CRT phosphor and amber */
[data-room="machine"] {
  --paper: #07110B;
  --paper-dot: #0F2418;
  --surface: #0D1D13;
  --surface-2: #12281A;
  --ink: #3DFF8F;
  --ink-soft: #2BB868;
  --line: #3DFF8F;
  --shadow-color: #1C6B3E;
  --accent: #FFB000;
  --on-accent: #07110B;
  --primary: #FFB000;
  --on-primary: #07110B;
  --phosphor: #3DFF8F;
  --amber: #FFB000;
  --door: #1F3B2A;
  --door-panel: #2C5139;
  --focus-ring: 0 0 0 3px #07110B, 0 0 0 6px #FFB000;
  color-scheme: dark;
}

/* The Lab: blueprint paper, white chalk */
[data-room="lab"] {
  --paper: #0F2B5B;
  --paper-dot: #2A4C86;
  --surface: #143A73;
  --surface-2: #1B4888;
  --ink: #FFFFFF;
  --ink-soft: #BFD3F2;
  --line: #FFFFFF;
  --shadow-color: #061A3A;
  --accent: #8FD3FF;
  --on-accent: #0F2B5B;
  --chalk: #FFFFFF;
  --grid-line: rgba(143, 211, 255, 0.16);
  --door: #6C4BFF;
  --door-panel: #8A70FF;
  --focus-ring: 0 0 0 3px #0F2B5B, 0 0 0 6px #FFD23F;
  color-scheme: dark;
}

/* ==========================================================================
   Global baseline that every page gets
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  overflow-x: hidden;
}

/* Visible focus everywhere, keyboard only */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Reduced motion: state changes stay visible, movement goes away */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
  }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}