/**
 * DESIGN TOKENS — "ATELIER" SYSTEM
 * ---------------------------------------------------------------------------
 * A bright luxury language: warm white and cream ground, light grey structure,
 * a single burnished-orange accent, and near-black ink for type.
 *
 * The semantic names are unchanged from the previous dark system on purpose —
 * `ground`, `panel`, `ink`, `signal` and the rest keep their meaning, so a
 * re-theme is a change of values here rather than a rewrite of every
 * component. That is the whole reason for having a semantic layer.
 *
 * Values are space-separated RGB triplets so Tailwind's `<alpha-value>` syntax
 * works (`bg-panel/80`). Consumed by tailwind.config.ts.
 */

:root {
  /* ---- Primitives: warm white & cream ---- */
  --white: 255 255 255;
  --cream-50: 249 248 246;   /* page ground (Warm Linen Cream: #F9F8F6) */
  --cream-100: 250 245 237;  /* panel */
  --cream-200: 245 238 227;  /* deep panel */

  /* ---- Primitives: light grey structure ---- */
  --grey-100: 242 240 235;   /* fills */
  --grey-200: 230 226 217;   /* hairlines */
  --grey-300: 209 203 191;   /* strong hairlines */
  --grey-500: 141 133 121;   /* muted type */

  /* ---- Primitives: ink ---- */
  --ink-700: 82 74 65;       /* body copy */
  --ink-950: 26 26 24;       /* headings (Deep Espresso: #1A1A18) */

  /* ---- Primitives: the accent — burnished orange ---- */
  --orange-100: 253 238 226;
  --orange-300: 244 172 122;
  --orange-500: 216 100 42;  /* primary accent */
  --orange-700: 176 74 26;   /* pressed / deep */

  /* ---- Primitives: status ---- */
  --jade-500: 58 138 104;
  --rust-500: 186 62 44;

  /* ---- Semantic layer (light = default) ---- */
  --color-ground: var(--cream-50);
  --color-panel: var(--cream-100);
  --color-raised: var(--white);
  --color-fill: var(--grey-100);
  --color-line: var(--grey-200);
  --color-line-strong: var(--grey-300);

  --color-ink: var(--ink-950);
  --color-body: var(--ink-700);
  --color-muted: var(--grey-500);

  --color-signal: var(--orange-500);
  --color-signal-deep: var(--orange-700);
  --color-signal-soft: var(--orange-100);
  --color-live: var(--jade-500);
  --color-alert: var(--rust-500);

  /* ---- Typography ----
     A soft luxurious serif for display, and Plus Jakarta Sans for UI and copy. */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-mono: 'Plus Jakarta Sans', ui-sans-serif, sans-serif;
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, sans-serif;

  /* ---- Motion ---- */
  --ease-signal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-signal-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-signal-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --duration-fast: 200ms;
  --duration-base: 420ms;
  --duration-slow: 760ms;
  --duration-cinematic: 1300ms;

  /* ---- Geometry ----
     The chamfer survives the re-theme but shrinks: at this scale it reads as a
     considered detail on a card rather than a sci-fi motif. */
  --chamfer: 10px;
  --chamfer-sm: 6px;
  --chamfer-lg: 20px;

  /* ---- Layout ---- */
  --frame-inset: 1.75rem;
  --frame-inset-sm: 0.75rem;
  --header-height: 5.5rem;
  --utility-height: 3.5rem;

  --z-frame: 40;
  --z-header: 60;
  --z-utility: 55;
  --z-overlay: 80;
  --z-modal: 100;
  --z-preloader: 200;
}

/**
 * Dark theme, retained as an option. Not the primary experience — provided so
 * anyone forcing dark at OS level still gets a designed page rather than an
 * inverted one.
 */
[data-theme='dark'] {
  --color-ground: 11 11 13;  /* Obsidian/Warm Charcoal: #0B0B0D */
  --color-panel: 26 23 20;
  --color-raised: 33 29 25;
  --color-fill: 42 37 32;
  --color-line: 56 50 43;
  --color-line-strong: 84 75 64;

  --color-ink: 234 230 223;  /* Soft Alabaster: #EAE6DF */
  --color-body: 214 206 194;
  --color-muted: 154 144 130;

  --color-signal: var(--orange-300);
  --color-signal-deep: var(--orange-500);
  --color-signal-soft: 62 40 26;
}

@media print {
  :root {
    --color-ground: 255 255 255;
    --color-panel: 255 255 255;
    --color-ink: 0 0 0;
    --color-body: 30 30 30;
  }
}