/* ============================================================
   StayOS — Design tokens
   Palette drawn from the real Magura Jina dusk: warm stone,
   ember sunset, twilight violet. One accent, lots of quiet.
   ============================================================ */

:root {
  /* Type families — luxury serif for statements, system sans for UI.
     No web fonts: fast, offline, and elegant on macOS. */
  --font-display: "Bodoni 72", "Bodoni MT", "Didot", "Cormorant Garamond",
                  "Hoefler Text", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
               "Segoe UI", system-ui, sans-serif;

  /* Fluid type scale */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1.0rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);
  --step-4:  clamp(3rem, 2rem + 4.6vw, 6rem);
  --step-5:  clamp(3.6rem, 2rem + 7vw, 8.5rem);

  /* Spacing */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.75rem;
  --space-l: 3rem;
  --space-xl: clamp(4rem, 3rem + 5vw, 8rem);
  --space-2xl: clamp(6rem, 4rem + 8vw, 12rem);

  --container: 1240px;
  --container-wide: 1600px;

  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Light theme (default) ---- */
  --bg: #f5f1ea;
  --bg-2: #efe9df;
  --surface: #fffdf9;
  --surface-2: #f7f2ea;
  --ink: #1b1917;
  --ink-soft: #4b453e;
  --ink-mute: #8a8177;
  --line: rgba(27, 25, 23, 0.10);
  --line-strong: rgba(27, 25, 23, 0.16);

  --ember: #bd6b46;      /* sunset terracotta */
  --ember-soft: #d69a76;
  --twilight: #5f5680;   /* dusk violet */
  --gold: #a9855f;

  --glass: rgba(255, 253, 249, 0.62);
  --glass-line: rgba(255, 255, 255, 0.55);
  --scrim: rgba(20, 16, 12, 0.42);

  --shadow-s: 0 2px 10px rgba(27, 25, 23, 0.06);
  --shadow-m: 0 18px 50px -20px rgba(27, 25, 23, 0.28);
  --shadow-l: 0 40px 90px -30px rgba(27, 25, 23, 0.40);
  --shadow-ember: 0 20px 60px -18px rgba(189, 107, 70, 0.45);

  --grain-opacity: 0.045;
  color-scheme: light;
}

/* System preference = dark, unless the user forced light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0c0b;
    --bg-2: #14110f;
    --surface: #17130f;
    --surface-2: #1e1813;
    --ink: #efe7db;
    --ink-soft: #c3b9ab;
    --ink-mute: #8b8073;
    --line: rgba(239, 231, 219, 0.10);
    --line-strong: rgba(239, 231, 219, 0.18);

    --ember: #d98a5f;
    --ember-soft: #e0a982;
    --twilight: #8f83b3;
    --gold: #c8a377;

    --glass: rgba(23, 19, 15, 0.55);
    --glass-line: rgba(255, 255, 255, 0.10);
    --scrim: rgba(8, 6, 4, 0.55);

    --shadow-s: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-m: 0 22px 60px -22px rgba(0, 0, 0, 0.7);
    --shadow-l: 0 50px 110px -30px rgba(0, 0, 0, 0.8);
    --shadow-ember: 0 24px 70px -20px rgba(217, 138, 95, 0.35);
    --grain-opacity: 0.06;
  }
}

/* Explicit dark toggle wins in both directions */
:root[data-theme="dark"] {
  --bg: #0e0c0b; --bg-2: #14110f; --surface: #17130f; --surface-2: #1e1813;
  --ink: #efe7db; --ink-soft: #c3b9ab; --ink-mute: #8b8073;
  --line: rgba(239,231,219,0.10); --line-strong: rgba(239,231,219,0.18);
  --ember: #d98a5f; --ember-soft: #e0a982; --twilight: #8f83b3; --gold: #c8a377;
  --glass: rgba(23,19,15,0.55); --glass-line: rgba(255,255,255,0.10); --scrim: rgba(8,6,4,0.55);
  --shadow-s: 0 2px 10px rgba(0,0,0,0.4); --shadow-m: 0 22px 60px -22px rgba(0,0,0,0.7);
  --shadow-l: 0 50px 110px -30px rgba(0,0,0,0.8); --shadow-ember: 0 24px 70px -20px rgba(217,138,95,0.35);
  --grain-opacity: 0.06; color-scheme: dark;
}