/* 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 ───────────────────────────────── */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-full: 9999px;
    /* backward-compat aliases */
    --radius-sm: var(--r-sm);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-lg);
    --radius-xl: var(--r-xl);
    --radius-full: var(--r-full);

    /* ── 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;

    /* ── Transitions (short aliases — Material motion curve) */
    --tf: 140ms cubic-bezier(0.4, 0, 0.2, 1); /* fast — hover, color */
    --tn: 240ms cubic-bezier(0.4, 0, 0.2, 1); /* normal — panels */
    --t-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1); /* slow — page transitions */
    --tspring: 340ms cubic-bezier(0.34, 1.56, 0.64, 1); /* spring — toasts, pop-ins */

    /* ── 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);

    /* ── Elevation — cold Nordic shadows ─────────────── */
    --e1: 0 1px 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4);
    --e2: 0 4px 14px rgba(0, 0, 0, .60), 0 2px 4px rgba(0, 0, 0, .4);
    --e3: 0 8px 28px rgba(0, 0, 0, .70), 0 4px 8px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .04);
    --e4: 0 20px 60px rgba(0, 0, 0, .80), 0 8px 20px rgba(0, 0, 0, .55);

    /* ── Spacing short aliases (4px grid) ────────────── */
    --sp1: var(--space-1);
    --sp2: var(--space-2);
    --sp3: var(--space-3);
    --sp4: var(--space-4);
    --sp5: var(--space-5);
    --sp6: var(--space-6);
    --sp7: var(--space-7);
    --sp8: var(--space-8);

    /* ── Border colour values ─────────────────────────── */
    --b0: rgba(255, 255, 255, 0.04); /* barely-there dividers */
    --b1: rgba(255, 255, 255, 0.08); /* default borders */
    --b2: rgba(255, 255, 255, 0.14); /* strong borders */
    --ba: rgba(196, 149, 106, 0.35); /* accent borders */

    /* ── Quest colour (distinct from --color-ochre/warning) */
    --quest: #a88c4a;

    /* ── Typography scale ─────────────────────────────── */
    --ts-xs: 0.75rem; /* 12px */
    --ts-sm: 0.8125rem; /* 13px */
    --ts-base: 0.875rem; /* 14px — matches --ui-size */
    --ts-md: 1rem; /* 16px */
    --ts-lg: 1.125rem; /* 18px */

    /* ── Component sizing ─────────────────────────────── */
    --tooltip-max-w: 300px;

    /* ── Short text aliases ───────────────────────────── */
    --t1: var(--text-primary);
    --t2: var(--text-secondary);
    --t3: var(--text-tertiary);

    /* ── Short background aliases ────────────────────── */
    --bg1: var(--bg-base);
    --bg2: var(--bg-surface-1);
    --bg3: var(--bg-surface-2);

    /* ── Short colour aliases ─────────────────────────── */
    --sage: var(--color-sage);
    --rose: var(--color-rose);
    --ochre: var(--color-ochre);
    --frost: var(--color-frost);
    --lavender: var(--color-lavender);
    --ember: var(--color-ember);
    --slate: var(--color-slate);

    /* ── Short surface aliases ────────────────────────── */
    --bg-s1: var(--bg-surface-1);
    --bg-s2: var(--bg-surface-2);
    --bg-s3: var(--bg-surface-3);

    /* ── Short font alias ─────────────────────────────── */
    --prose: var(--font-prose);
    --mono: var(--font-mono);
}

/* ── 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);
}

/* ── Inner Voice ──────────────────────────────────────── */
.scene-inner-voice {
    font-style: italic;
    color: var(--color-inner-voice, #c4b8a8);
}

/* ── 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);
}