/* Chronicle Design System — The Norse Ledger */
/* Single source of truth for all design tokens */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400&display=swap');

:root {
  /* ── Backgrounds ─────────────────────────────────── */
  --bg-base:       #121214;  /* Deepest layer — page background */
  --bg-surface-1:  #1a1a1e;  /* Cards, panels, sidebars */
  --bg-surface-2:  #242428;  /* Input fields, nested elements */
  --bg-surface-3:  #2e2e34;  /* Hover states, selected chips */

  /* ── Borders ─────────────────────────────────────── */
  --border-subtle:  rgba(255,255,255,0.06);  /* Hairline dividers */
  --border-visible: rgba(255,255,255,0.12);  /* Visible separators */
  --border-strong:  rgba(255,255,255,0.22);  /* Emphasized borders */

  /* ── Text ────────────────────────────────────────── */
  --text-primary:   #e8e6e3;  /* Headings, labels */
  --text-secondary: #a8a5a0;  /* Body, descriptions */
  --text-tertiary:  #555558;  /* Timestamps, hints, muted */
  --text-prose:     #d4d0c8;  /* Narrative prose — slightly warm */

  /* ── Accent (warm copper) ────────────────────────── */
  --accent:         #c4956a;  /* Primary interactive color */
  --accent-hover:   #d4a87a;  /* Hover state */
  --accent-subtle:  rgba(196,149,106,0.12); /* Tinted backgrounds */

  /* ── Semantic Colors ─────────────────────────────── */
  --color-sage:         #7a9b82;  /* Success, online, published */
  --color-sage-subtle:  rgba(122,155,130,0.12);

  --color-rose:         #b07878;  /* Danger, combat, errors */
  --color-rose-subtle:  rgba(176,120,120,0.12);

  --color-slate:        #7a8a9b;  /* Exits, navigation */
  --color-slate-subtle: rgba(122,138,155,0.12);

  --color-ochre:        #b09060;  /* Quests, warnings, uncertain */
  --color-ochre-subtle: rgba(176,144,96,0.12);

  --color-lavender:     #9b8ab0;  /* Magic, AI assist, spells */
  --color-lavender-subtle: rgba(155,138,176,0.12);

  --color-frost:        #7a9aaa;  /* Information, cold/ice */
  --color-frost-subtle: rgba(122,154,170,0.12);

  --color-ember:        #b07848;  /* Fire, warmth, energy */
  --color-ember-subtle: rgba(176,120,72,0.12);

  /* ── Scene Tints (runtime-adjustable per location) ── */
  --scene-tint:         transparent;
  --scene-tint-surface: transparent;

  /* Scene tint classes applied to body by the app */
  /* .scene-forest   → --scene-tint: rgba(122,155,130,0.04) */
  /* .scene-dungeon  → --scene-tint: rgba(50,40,30,0.08)    */
  /* .scene-city     → --scene-tint: rgba(122,138,155,0.04) */
  /* .scene-ocean    → --scene-tint: rgba(122,154,170,0.05) */
  /* .scene-desert   → --scene-tint: rgba(176,144,96,0.06)  */

  /* ── Spacing Scale ───────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Border Radius ───────────────────────────────── */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ── Typography ──────────────────────────────────── */
  --font-ui:    'Inter', system-ui, -apple-system, sans-serif;
  --font-prose: 'Source Serif 4', Georgia, serif;
  --font-mono:  'JetBrains Mono', 'Consolas', monospace;

  --prose-size:        17px;
  --prose-line-height: 1.75;
  --ui-size:           14px;

  /* ── Breakpoints (CSS custom properties for JS use) ─ */
  --bp-mobile:  640px;
  --bp-tablet:  1024px;
  --bp-desktop: 1400px;

  /* ── Safe Area Insets (for notched phones) ───────── */
  --safe-area-top:    env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left:   env(safe-area-inset-left, 0px);
  --safe-area-right:  env(safe-area-inset-right, 0px);

  /* ── Transitions ─────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.6);
}

/* ── Scene Tint Classes ──────────────────────────────── */
.scene-forest  { --scene-tint: rgba(122,155,130,0.04); --scene-tint-surface: rgba(122,155,130,0.02); }
.scene-dungeon { --scene-tint: rgba(50,40,30,0.08);    --scene-tint-surface: rgba(50,40,30,0.04); }
.scene-city    { --scene-tint: rgba(122,138,155,0.04); --scene-tint-surface: rgba(122,138,155,0.02); }
.scene-ocean   { --scene-tint: rgba(122,154,170,0.05); --scene-tint-surface: rgba(122,154,170,0.02); }
.scene-desert  { --scene-tint: rgba(176,144,96,0.06);  --scene-tint-surface: rgba(176,144,96,0.03); }

/* ── Touch Target Utility ────────────────────────────── */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Backward-compat aliases (for gradual migration) ─── */
/* Maps old variable names to new Chronicle tokens so existing
   component CSS continues to work during the migration.
   Remove these aliases once all components are migrated. */
:root {
  --color-background: var(--bg-base);
  --color-surface:    var(--bg-surface-1);
  --color-surface-2:  var(--bg-surface-2);
  --color-text:       var(--text-primary);
  --color-text-muted: var(--text-secondary);
  --color-accent:     var(--accent);
  --color-primary:    var(--accent);
  --color-primary-hover: var(--accent-hover);
  --color-border:     var(--border-visible);
  --color-success:    var(--color-sage);
  --color-danger:     var(--color-rose);
  --color-warning:    var(--color-ochre);
  --font-heading:     var(--font-ui);
  --font-body:        var(--font-prose);
  --border-radius:    var(--radius-sm);
  --color-hover:      rgba(255,255,255,0.08);
}