/* Design tokens: the light paper world, with a dark theme further down (DF.theme). */
:root {
  /* World */
  --bg: #f4f1ec;
  --ink: #111111;
  --ink-muted: #6b6862;
  --on-color: #ffffff;
  --card-ink: #111111;          /* text on the coloured Factory cards: stays dark in every theme */

  /* Card surfaces (from the Home reference) */
  --surface-purple: #8a82dc;
  --surface-lilac: #e2b6f3;
  --surface-teal: #a9d6dc;
  --surface-violet: #9b8ad9;
  --surface-graphite: #5f5e62;
  --surface-black: #0e0e0e;
  --surface-amber: #f4c46e;
  --surface-media: #b9dcd8;
  --surface-coral: #ec9a8c;
  --surface-white: #ffffff;

  /* Type */
  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape — card units scale with the stage width (cqw) */
  --radius-card: 2.3cqw;
  --shadow-card: 0 1px 2px rgb(17 17 17 / 0.05);
  /* Factory cards: lifted off the world. The shadows fall downward only (positive y, negative
     spread), so the About card's cut-out tab corner casts nothing. A hair-thin light edge and
     a top highlight give the surface a crisp, slightly glossy cut. */
  --shadow-card-raised:
    0 2px 3px -1px rgb(17 17 17 / 0.12),
    0 12px 18px -12px rgb(17 17 17 / 0.3),
    0 30px 46px -30px rgb(17 17 17 / 0.38);
  --card-edge:
    inset 0 1px 0 rgb(255 255 255 / 0.32),
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    inset 0 -1px 0 rgb(17 17 17 / 0.08);
  /* The same lift for the small round nav buttons, scaled to their size */
  --shadow-nav-raised:
    0 1px 2px -0.5px rgb(17 17 17 / 0.16),
    0 6px 10px -6px rgb(17 17 17 / 0.32),
    0 14px 20px -14px rgb(17 17 17 / 0.36);

  /* Universe solar system (js/systems/solar.js), light palette (the site's paper world). The
     dark theme below swaps these for the deep-space design from docs/plans/01-03. */
  --space-bg: var(--bg);
  --space-ink: #3c2d64;        /* stars, disc particles */
  --space-orbit: #463778;      /* orbit lines, rings */
  --space-label: #281e46;
  --space-dust: #5f50a0;
  --space-haze: #8a82dc;       /* the violet haze around the core */
  --space-core: #1d1a2e;       /* the core: ink-dark point, white-hot centre */
  --planet-web: #8f84e8;
  --planet-cad: #e8a39a;
  --planet-ai: #5fb5a5;
  --planet-mech: #e2b15f;
  --planet-auto: #b48fe0;

  /* Accent and motion */
  --accent: var(--surface-purple);
  --ease-scene: cubic-bezier(0.65, 0, 0.25, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.8, 0.25);
  --ease-out: cubic-bezier(0.2, 0.8, 0.25, 1);

  /* Alive vs inert — one rule for every object in every scene:
     ALIVE (has content or reacts: cards, projects, cores, Vector) is FILLED.
     INERT (physical presence only: no content, no hover, no focus) is HOLLOW, an outline only. */
  --inert-stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  --inert-stroke-width: 1.25px;

  /* Stage geometry: collage measured from REF/CONTEXT/reference_home.png */
  --stage-ratio: 685 / 390;
  --nav-space: 4.5rem;
  --world-pad: 2.5rem;

  /* Fixed z-index scale */
  --z-scene: 0;
  --z-cards: 10;
  --z-nav: 20;
  --z-takeover: 25;
  --z-world-input: 28;   /* cursor-Vector caret and answers */
  --z-cursor: 30;
}

/* ---- Dark theme (the small toggle in the bottom-right corner; DF.theme) ----------------------
   Only tokens change. The coloured Factory cards keep their colours and their dark ink. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1014;
  --ink: #ecebe7;
  --ink-muted: #9b988f;
  --surface-white: #1b1c22;
  --surface-black: #050506;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-card-raised:
    0 2px 3px -1px rgb(0 0 0 / 0.5),
    0 12px 18px -12px rgb(0 0 0 / 0.7),
    0 30px 46px -30px rgb(0 0 0 / 0.8);
  --shadow-nav-raised:
    0 1px 2px -0.5px rgb(0 0 0 / 0.5),
    0 6px 10px -6px rgb(0 0 0 / 0.7),
    0 14px 20px -14px rgb(0 0 0 / 0.8);
  --card-edge:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    inset 0 0 0 1px rgb(255 255 255 / 0.05),
    inset 0 -1px 0 rgb(0 0 0 / 0.3);
  /* Universe: deep space, a white-hot core */
  --space-bg: #05060d;
  --space-ink: #cdc6ff;
  --space-orbit: #8ca5ff;
  --space-label: #e4e0ff;
  --space-dust: #a096eb;
  --space-haze: #463c96;
  --space-core: #ffeed7;
}