/**
 * Makery design system — "Control Room After Dark"
 * ==================================================
 * A complete replacement. Not paper-and-ink. A deep, lit console — the feeling
 * of sitting at the controls of something powerful, at night. Built for
 * teenagers who make games for each other and learn to direct AI. Energy, not
 * restraint. Arcade, not workbench. Warm neon, never the black-and-acid-green
 * cliché.
 *
 * Three lights on a dark deck:
 *   PULSE  — a hot coral-red. YOU. Your action, your GO, your hand on the control.
 *   BEAM   — a cyan-mint glow. THE MACHINE. Its voice, live states, what it returns.
 *   PRIZE  — a warm arcade gold. EARNED. Levels, wins, the certificate.
 * The deck itself is deep navy-plum, layered so nothing is ever flat black.
 */

:root {
  /* ---- DECK — the console surface. Layered darks, warm-shifted, never #000 ---- */
  --deck-000: #0d0b1a;   /* deepest — the void behind everything */
  --deck-100: #151228;   /* app background */
  --deck-200: #1e1a38;   /* panels, the machine's side of a split */
  --deck-300: #2a2550;   /* raised cards, the learner's build */
  --deck-400: #3b356e;   /* borders, dividers, controls at rest */
  --deck-500: #564f92;   /* hairlines that need to show */

  /* ---- LIGHT — text on the deck ---- */
  --lume-100: #f4f2ff;   /* headings, the learner's own words — near-white, warm */
  --lume-200: #cfc9ee;   /* body */
  --lume-300: #948dc4;   /* secondary */
  --lume-400: #635c8f;   /* captions, disabled */

  /* ---- PULSE — YOU. Hot coral-red. The action, the GO, the primary. ----
     Alive and warm, not a corporate red. This is the button you press. */
  --pulse:      #ff4d6d;
  --pulse-lift: #ff6b85;
  --pulse-sunk: #e5344f;
  --pulse-glow: rgba(255, 77, 109, 0.35);   /* the halo under a live control */
  --pulse-ghost:#33131f;                     /* pulse at rest, behind text */

  /* ---- BEAM — THE MACHINE. Cyan-mint glow. Its voice, its output, live. ----
     Cool against the warm pulse, so YOU and IT never blur. Reads as "signal
     from the console", not "AI brand blue". */
  --beam:      #35e0c7;
  --beam-lift: #5cf0da;
  --beam-sunk: #1fb8a3;
  --beam-glow: rgba(53, 224, 199, 0.30);
  --beam-ghost:#0e2b28;

  /* ---- PRIZE — EARNED. Warm arcade gold. Levels, wins, certificates. ----
     Brighter and more joyful than a mineral gold — a teenager should WANT it.
     Never used for the machine, never for an action. Only for what you won. */
  --prize:      #ffc23d;
  --prize-lift: #ffd36b;
  --prize-glow: rgba(255, 194, 61, 0.30);
  --prize-ghost:#332611;

  /* ---- STATES ---- */
  --ok:   #35e0c7;   /* running, verified, shipped — shares the beam */
  --stop: #ff4d6d;   /* rejected, wrong, over a limit — shares the pulse */
  --wait: #ffc23d;   /* pending, awaiting a parent — shares the prize */

  /* ---- TYPE ----
     Display: a face with attitude and speed. Clash / Chillax-family energy —
     wide, confident, a little rounded, reads as PLAY not corporate. Fallback
     chain lands on a heavy grotesque so it never collapses to Arial.
     UI: a clean geometric sans that stays sharp on a dark screen at 14px.
     Data: mono, for prompts and numbers — they are code even as English. */
  --font-display: 'Clash Display', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-ui:      'Satoshi', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — 1.28, a touch bigger than a major third, for energy ---- */
  --t-xs:  0.75rem;
  --t-sm:  0.875rem;
  --t-base:1rem;
  --t-md:  1.28rem;
  --t-lg:  1.64rem;
  --t-xl:  2.62rem;
  --t-2xl: 4.19rem;    /* the one hero moment — a score, a level-up */

  --lead-tight: 1.05;   /* display runs tight and punchy */
  --lead-body:  1.55;

  /* ---- SPACE — 8px base ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* ---- FORM ----
     Rounder than the old system on purpose — this is arcade, not editorial.
     Radius still encodes hierarchy: controls are chunky, builds are soft,
     the machine's reply is the softest (most provisional). */
  --r-ctrl: 12px;   /* buttons, inputs — chunky and tappable */
  --r-made: 16px;   /* a build, a card */
  --r-soft: 22px;   /* the machine's reply, chips */
  --r-full: 999px;

  --line:   1px solid var(--deck-400);
  --line-lit: 1.5px solid var(--deck-500);

  /* Glow, not shadow. On a dark deck a light thing GLOWS; it does not cast a
     grey drop-shadow. Used only on the live control and the thing in play. */
  --glow-pulse: 0 0 0 1px var(--pulse), 0 8px 30px -6px var(--pulse-glow);
  --glow-beam:  0 0 0 1px var(--beam),  0 8px 30px -6px var(--beam-glow);
  --glow-prize: 0 0 0 1px var(--prize), 0 8px 30px -6px var(--prize-glow);
  --lift:       0 12px 40px -12px rgba(0, 0, 0, 0.6);
}

/* This system is dark-native. A light mode exists for classrooms and daylight —
   the deck becomes a bright, warm off-white and the three lights hold their hue
   but deepen so they read on white. It is a real alternative, not an
   afterthought inversion. */
/* Makery is DARK-NATIVE. The :root block above is the real brand. Light mode is a
   deliberate alternative for daylight and classrooms — offered by an explicit
   [data-theme="light"] toggle, and by the OS setting for people who prefer it.
   The [data-theme] attribute always wins over the OS media query, so a surface
   can pin itself dark (the guidelines page does) regardless of the visitor's OS. */

/* OS-preference light (only when nothing is pinned) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --deck-000: #ffffff; --deck-100: #f5f3fb; --deck-200: #ece8f7;
    --deck-300: #ffffff; --deck-400: #d9d3ec; --deck-500: #b9b1d8;
    --lume-100: #1a1633; --lume-200: #3a3560; --lume-300: #6f6899; --lume-400: #9a93bf;
    --pulse: #e5344f; --pulse-lift: #ff4d6d; --pulse-sunk: #c31f38; --pulse-ghost: #ffe3e8;
    --beam:  #0f9f8c; --beam-lift: #1fb8a3; --beam-sunk: #0b7d6e; --beam-ghost: #d8f5ef;
    --prize: #c8890a; --prize-lift: #e5a41f; --prize-ghost: #fbeecb;
    --ok: #0f9f8c; --stop: #e5344f; --wait: #c8890a;
    --line: 1px solid var(--deck-400);
    --glow-pulse: 0 0 0 1.5px var(--pulse); --glow-beam: 0 0 0 1.5px var(--beam); --glow-prize: 0 0 0 1.5px var(--prize);
    --lift: 0 10px 30px -12px rgba(26, 22, 51, 0.22);
  }
}

/* Explicit light toggle — wins over the OS */
[data-theme="light"] {
  --deck-000: #ffffff; --deck-100: #f5f3fb; --deck-200: #ece8f7;
    --deck-300: #ffffff; --deck-400: #d9d3ec; --deck-500: #b9b1d8;
    --lume-100: #1a1633; --lume-200: #3a3560; --lume-300: #6f6899; --lume-400: #9a93bf;
    --pulse: #e5344f; --pulse-lift: #ff4d6d; --pulse-sunk: #c31f38; --pulse-ghost: #ffe3e8;
    --beam:  #0f9f8c; --beam-lift: #1fb8a3; --beam-sunk: #0b7d6e; --beam-ghost: #d8f5ef;
    --prize: #c8890a; --prize-lift: #e5a41f; --prize-ghost: #fbeecb;
    --ok: #0f9f8c; --stop: #e5344f; --wait: #c8890a;
    --line: 1px solid var(--deck-400);
    --glow-pulse: 0 0 0 1.5px var(--pulse); --glow-beam: 0 0 0 1.5px var(--beam); --glow-prize: 0 0 0 1.5px var(--prize);
    --lift: 0 10px 30px -12px rgba(26, 22, 51, 0.22);
}

/* Explicit dark pin — re-states the dark brand so a page can force it even on a
   light-set OS. This is what the guidelines and the app use. */
[data-theme="dark"] {
  color-scheme: dark;
}
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}