/* ALYSSIUN Foundation — design tokens.
 *
 * The single source of colour, radius, shadow, type and motion for this app.
 * No component file may declare a raw colour: it names a token or it is a bug.
 *
 * Values are the canonical ALYSSIUN atmosphere values already in production in
 * ALYSSIUN Drive (public/assets/style.css), so Foundation reads as the same
 * system rather than an approximation of it.
 *
 * LUX / Ceramic Mist is the default environment. NEO / Infinite Void is
 * optional and applied via [data-theme="neo"] / [data-atmosphere="void"].
 */

:root {
  /* --- Ceramic Mist (LUX) — the default -------------------------------- */
  --void: #ecebe4;             /* base surface */
  --void-2: #e2e0d7;           /* recessed surface */
  --glass: rgba(255, 255, 255, 0.50);
  --glass-2: rgba(255, 255, 255, 0.78);
  --hair: rgba(20, 20, 26, 0.10);
  --hair-2: rgba(20, 20, 26, 0.20);
  --text: #16161c;
  --muted: #6c6c77;
  --ceramic: #efece6;
  --ceramic-ink: #14141a;

  /* Accents. Jade carries "verified / in progress"; it is never the only
     signal — every state also carries a word. */
  --jade: #2f7d62;
  --danger: #c1473d;

  --bg:
    radial-gradient(1100px 680px at 50% -240px, #fbfaf6 0%, rgba(236, 235, 228, 0) 60%),
    var(--void);
  --nav-bg: rgba(238, 236, 229, 0.72);
  --input: rgba(255, 255, 255, 0.55);
  --primary: #16161c;
  --primary-ink: #f6f5f1;
  --primary-hover: #000;

  --card-shadow: 0 30px 70px -50px rgba(20, 20, 26, 0.30);
  --card-shadow-hover: 0 36px 80px -46px rgba(20, 20, 26, 0.38);
  --lift-shadow: 0 12px 26px -18px rgba(20, 20, 26, 0.42);

  /* --- Geometry: sharp industrial radius, never a pill ------------------ */
  --radius: 4px;
  --radius-sm: 2px;
  --radius-lg: 10px;

  /* --- Kinetic glass ---------------------------------------------------- */
  --blur: 14px;
  --blur-strong: 22px;

  /* --- Typography: system stack only.
         No webfont means no FOUT, no layout shift and no third-party request. */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Thin = luxury, Regular = information, Bold = command. */
  --weight-thin: 200;
  --weight-regular: 400;
  --weight-bold: 600;

  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.34vw, 1.38rem);
  --step-2: clamp(1.45rem, 1.30rem + 0.72vw, 2.00rem);
  --step-3: clamp(1.85rem, 1.55rem + 1.45vw, 3.00rem);
  --step-4: clamp(2.30rem, 1.70rem + 2.90vw, 4.40rem);

  /* --- Layout ------------------------------------------------------------ */
  --measure: 62ch;
  --shell: 1180px;
  --gutter: clamp(1.15rem, 0.70rem + 2.2vw, 3.25rem);
  --section-gap: clamp(3.5rem, 2.4rem + 5vw, 7rem);

  /* --- Motion: quiet and physical. Never decorative. --------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 140ms;
  --slow: 400ms;

  --focus-ring: 2px solid var(--text);
  --focus-offset: 3px;

  font-synthesis: none;
  color-scheme: light;
}

/* --- Infinite Void (NEO) — optional environment ------------------------- */
:root[data-theme="neo"],
:root[data-atmosphere="void"] {
  --void: #060608;
  --void-2: #0c0c11;
  --glass: rgba(255, 255, 255, 0.035);
  --glass-2: rgba(255, 255, 255, 0.06);
  --hair: rgba(255, 255, 255, 0.09);
  --hair-2: rgba(255, 255, 255, 0.16);
  --text: #f4f4f6;
  --muted: #8b8b97;
  --jade: #86e0c0;
  --danger: #e0726a;

  --bg: radial-gradient(1100px 680px at 50% -240px, #15151d 0%, rgba(6, 6, 8, 0) 60%), var(--void);
  --nav-bg: rgba(6, 6, 8, 0.70);
  --input: rgba(255, 255, 255, 0.02);
  --primary: var(--ceramic);
  --primary-ink: var(--ceramic-ink);
  --primary-hover: #fff;

  --card-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.90);
  --card-shadow-hover: 0 48px 100px -46px rgba(0, 0, 0, 0.95);
  --lift-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.80);

  --focus-ring: 2px solid var(--text);

  color-scheme: dark;
}

/* Respect the operating system when nobody has chosen an environment. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}

/* Reduced motion is a hard stop, not a softening: no transitions, no
   transforms, no smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fast: 1ms;
    --slow: 1ms;
  }
}