/*
 * MobileClient-347 design tokens.
 *
 * Direction (TASK-001 benchmark, owner-approved pivot): none of the category's real sites
 * (NovelAI, Hidden Door, inkle Studios) use a muted corporate-blue/serif look — they lean
 * into a bold saturated accent, heavy poster-style display type, and real illustration.
 * This is deliberately NOT a copy of any of them: Hidden Door already owns cobalt blue,
 * NovelAI already owns purple/pink/teal-on-dark. This site's signature is a warm
 * ember/burnt-orange accent against a clean white gallery ground (inkle's white-base
 * instinct, our own color) — inspired by the pattern, not the palette.
 */

:root {
  /* Color — light (default) */
  --ink: #171922; /* near-black, cool charcoal-navy body text */
  --paper: #ffffff; /* clean white ground */
  --paper-deep: #f2f1ee; /* card background, slight warm-neutral bias toward the accent */
  --rule: #e2e0da; /* borders, warm-neutral */
  --muted: #63636b; /* secondary text */

  --accent: #e0501f; /* signature ember/burnt-orange */
  --accent-deep: #b13d15; /* accent text-on-light, hover states */
  --accent-tint: #ffe4d6; /* subtle accent-tinted backgrounds/badges */

  --success: #1d9a6c; /* functional color, distinct from brand accent */

  /* Persona accent overrides (Update Goblin / Audience Surrogate) — preserved verbatim
     per the owner's Explicit Preservation Constraint, not part of this palette pivot. */
  --accent-goblin: #4a6741;
  --accent-surrogate: #5a2d82;

  /* Type */
  --font-display:
    'Bricolage Grotesque', 'Archivo Black', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Spacing (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Radius — used sparingly per component, not applied uniformly everywhere */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;

  /* Shadow — two tiers, plus a thin accent rule for feature cards (real craft, not one flat token) */
  --shadow-card: 0 1px 2px rgba(23, 25, 34, 0.06), 0 8px 24px rgba(23, 25, 34, 0.06);
  --shadow-elevated: 0 4px 8px rgba(23, 25, 34, 0.08), 0 16px 40px rgba(23, 25, 34, 0.12);
  --accent-rule-width: 3px;
}

/* Color — dark (baseline prefers-color-scheme readability pass, not a user-facing toggle;
   see TASK-010/TASK-042 — no page in this plan requires dark mode, but visitors whose OS is
   set to dark should not be shown a blinding stark-white page). */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f1ee;
    --paper: #14151a;
    --paper-deep: #1b1d24;
    --rule: #33353d;
    --muted: #a3a3ab;

    --accent: #ff7a42;
    --accent-deep: #ffb088;
    --accent-tint: #3a2015;

    --success: #3dbf8e;
  }
}
:root[data-theme='dark'] {
  --ink: #f2f1ee;
  --paper: #14151a;
  --paper-deep: #1b1d24;
  --rule: #33353d;
  --muted: #a3a3ab;

  --accent: #ff7a42;
  --accent-deep: #ffb088;
  --accent-tint: #3a2015;

  --success: #3dbf8e;
}
:root[data-theme='light'] {
  --ink: #171922;
  --paper: #ffffff;
  --paper-deep: #f2f1ee;
  --rule: #e2e0da;
  --muted: #63636b;

  --accent: #e0501f;
  --accent-deep: #b13d15;
  --accent-tint: #ffe4d6;

  --success: #1d9a6c;
}