/* ==========================================================================
   Design Tokens — StoryCollectr

   All visual values as CSS custom properties. Every component references
   these tokens via var(--sc-*). Never hardcode raw values elsewhere.

   Palette: "Editorial Heirloom" — warm cream foundation, earth-tone accents,
   journal-like warmth throughout. No pure white. No pure black.
   ========================================================================== */

:root {
	/* ── Foundation ──────────────────────────────────────────────────────── */
	--sc-bg: #FAF7F2;
	--sc-surface: #FFFDF9;
	--sc-surface-raised: #ffffff0a;
	--sc-border: #E5DDD2;
	--sc-border-subtle: #EDE7DD;

	/* ── Text Hierarchy ─────────────────────────────────────────────────── */
	--sc-text-primary: #3A3530;
	--sc-text-secondary: #7A7068;
	--sc-text-tertiary: #A49A90;
	--sc-text-inverse: #FAF7F2;

	/* ── Brand / Accent ─────────────────────────────────────────────────── */
	--sc-accent: #c17a3a;
	--sc-accent-hover: #a8672e;
	--sc-accent-active: #935a27;
	--sc-accent-subtle: #c17a3a14;
	--sc-accent-text: #9e5f28;

	/* ── Semantic ────────────────────────────────────────────────────────── */
	--sc-success: #5a8a5e;
	--sc-success-subtle: #5a8a5e14;
	--sc-error: #c0503a;
	--sc-error-subtle: #c0503a14;
	--sc-warning: #b8863a;
	--sc-warning-subtle: #b8863a14;

	/* ── Core Earthy Palette (avatar colors, gradients, badges, etc) ────── */
	--sc-cream: #FAF7F2;
	--sc-cream-dark: #F2EDE5;
	--sc-warm-white: #FFFDF9;
	--sc-bark: #5C4033;
	--sc-bark-light: #7A5C4F;
	--sc-bark-faint: #A08272;
	--sc-rust: #B8603F;
	--sc-rust-soft: #C4785A;
	--sc-sage: #6B7F5E;
	--sc-sage-light: #8FA67E;
	--sc-moss: #4A5E3C;
	--sc-sand: #D4C5AB;
	--sc-sand-light: #E8DFCE;
	--sc-charcoal: #3A3530;

	/* Extended palette (avatars, monogram gradients) */
	--sc-terracotta: #A0522D;
	--sc-terracotta-light: #C4785A;
	--sc-plum: #7A5B5B;
	--sc-plum-light: #A68A8A;
	--sc-storm: #4A5568;
	--sc-storm-light: #8B9DAF;
	--sc-slate: #5C6B7A;
	--sc-slate-light: #8E9AAF;

	/* ── Status Colors ──────────────────────────────────────────────────── */
	--sc-status-in-progress: #7A6B2A;
	--sc-status-in-progress-bg: rgba(180, 160, 60, 0.1);
	--sc-status-success: #4A5E3C;
	--sc-status-success-bg: rgba(74, 94, 60, 0.1);
	--sc-status-error: #B8603F;
	--sc-status-error-bg: rgba(184, 96, 63, 0.1);
	--sc-status-warning: #7A6B2A;
	--sc-status-warning-bg: rgba(180, 160, 60, 0.1);

	/* ── Shadows ─────────────────────────────────────────────────────────── */
	--sc-shadow-xs: 0 1px 3px rgba(58, 53, 48, 0.06);
	--sc-shadow-sm: 0 2px 8px rgba(58, 53, 48, 0.08);
	--sc-shadow-md: 0 4px 16px rgba(58, 53, 48, 0.10);
	--sc-shadow-lg: 0 8px 24px rgba(58, 53, 48, 0.12);
	--sc-shadow-xl: 0 12px 40px rgba(58, 53, 48, 0.15);
	--sc-shadow-2xl: 0 24px 80px rgba(58, 53, 48, 0.25);

	/* ── Decorative warm gradients (placeholders, card covers) ───────────── */
	--sc-warm-1: #e8d5c4;
	--sc-warm-2: #d4c0a8;
	--sc-warm-3: #c4a882;

	/* ── Spacing Scale ───────────────────────────────────────────────────── */
	--sc-space-xs: 0.25rem;   /* 4px */
	--sc-space-sm: 0.5rem;    /* 8px */
	--sc-space-md: 1rem;      /* 16px */
	--sc-space-lg: 1.5rem;    /* 24px */
	--sc-space-xl: 2rem;      /* 32px */
	--sc-space-2xl: 3rem;     /* 48px */
	--sc-space-3xl: 4rem;     /* 64px */

	/* ── Border & Shape ──────────────────────────────────────────────────── */
	--sc-radius-xs: 0.25rem;  /* 4px */
	--sc-radius-sm: 0.375rem; /* 6px */
	--sc-radius-md: 0.5rem;   /* 8px */
	--sc-radius-lg: 0.75rem;  /* 12px */
	--sc-radius-xl: 1rem;     /* 16px */
	--sc-radius-full: 9999px; /* Pill / Circle */
	--sc-border-width: 1px;
	--sc-border-color: var(--sc-border);

	/* ── Typography ──────────────────────────────────────────────────────── */
	--sc-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	--sc-font-body: 'Source Serif 4', Georgia, serif;
	--sc-font-ui: 'Outfit', 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
	--sc-font-card-title: 'DM Serif Display', Georgia, serif;
	--sc-font-title-alt: 'Milonga', 'Lora', Georgia, 'Times New Roman', serif;
	--sc-font-script: 'Italianno', cursive;

	/* Font sizes — Standard Mode */
	--sc-text-3xs: 0.48rem;   /* 8px */
	--sc-text-2xs: 0.6rem;    /* 10px */
	--sc-text-xs: 0.75rem;    /* 12px */
	--sc-text-sm: 0.8125rem;  /* 13px */
	--sc-text-base: 0.9375rem;/* 15px */
	--sc-text-lg: 1.125rem;   /* 18px */
	--sc-text-xl: 1.25rem;    /* 20px */
	--sc-text-2xl: 1.75rem;   /* 28px */
	--sc-text-3xl: 2.25rem;   /* 36px */

	/* Font sizes — Simplified Mode overrides */
	--sc-text-simplified-min: 1rem;       /* 16px — absolute floor */
	--sc-text-simplified-body: 1.125rem;  /* 18px */
	--sc-text-simplified-label: 1.375rem; /* 22px */

	/* Font weights */
	--sc-weight-normal: 400;
	--sc-weight-medium: 500;
	--sc-weight-semibold: 600;
	--sc-weight-bold: 700;

	/* Line heights */
	--sc-leading-tight: 1.3;
	--sc-leading-normal: 1.65;
	--sc-leading-relaxed: 1.8;

	/* Letter spacing */
	--sc-tracking-tight: -0.01em;
	--sc-tracking-normal: 0;
	--sc-tracking-wide: 0.025em;

	/* ── Transitions ─────────────────────────────────────────────────────── */
	--sc-transition-fast: 150ms;
	--sc-transition-normal: 250ms;
	--sc-transition-slow: 450ms;
	--sc-ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
	--sc-ease-out: cubic-bezier(0, 0, 0.25, 1);
	--sc-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

	/* ── Z-Index Scale ───────────────────────────────────────────────────── */
	--sc-z-base: 0;
	--sc-z-sticky: 10;
	--sc-z-dropdown: 20;
	--sc-z-sheet: 30;
	--sc-z-modal: 40;
	--sc-z-toast: 50;

	/* ── Focus ────────────────────────────────────────────────────────────── */
	--sc-focus-ring: 0 0 0 3px rgba(184, 96, 63, 0.12);

	/* ── Content widths ──────────────────────────────────────────────────── */
	--sc-width-content: 42rem;
	--sc-width-wide: 64rem;
	--sc-width-full: 80rem;

	/* ── Layout / Nav ───────────────────────────────────────────────────── */
	--sc-sidebar-width: 16rem;
	--sc-nav-height: 3.5rem;
	--sc-content-max: 960px;

	/* ── Ghost Bar ───────────────────────────────────────────────────────── */
	--sc-nav-bg: rgba(250, 247, 242, 0.65);
	--sc-nav-border: rgba(212, 197, 171, 0.25);
	--sc-nav-panel-bg: var(--sc-surface);
}

/* ==========================================================================
   Dark Mode

   Warm charcoal tones — never cold blue-grays. The warmth is preserved.
   Simplified Mode is always light — dark mode only applies in Standard Mode.
   ========================================================================== */

[data-theme='dark'] {
	--sc-bg: #1e1b18;
	--sc-surface: #2a2622;
	--sc-surface-raised: #ffffff08;
	--sc-border: #3d3731;
	--sc-border-subtle: #33302b;

	--sc-text-primary: #ede8e0;
	--sc-text-secondary: #a89e92;
	--sc-text-tertiary: #736960;
	--sc-text-inverse: #2d2926;

	--sc-accent: #d4904e;
	--sc-accent-hover: #e0a366;
	--sc-accent-active: #c8843f;
	--sc-accent-subtle: #d4904e18;
	--sc-accent-text: #e0a366;

	--sc-success: #6fa873;
	--sc-success-subtle: #6fa87318;
	--sc-error: #d4634c;
	--sc-error-subtle: #d4634c18;
	--sc-warning: #cfa04e;
	--sc-warning-subtle: #cfa04e18;

	--sc-warm-1: #3d3530;
	--sc-warm-2: #4a3f38;
	--sc-warm-3: #5a4d42;

	--sc-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.15);
	--sc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
	--sc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
	--sc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
	--sc-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.35);
	--sc-shadow-2xl: 0 24px 80px rgba(0, 0, 0, 0.45);

	--sc-focus-ring: 0 0 0 3px rgba(212, 144, 78, 0.15);

	--sc-nav-bg: rgba(30, 27, 24, 0.65);
	--sc-nav-border: rgba(90, 80, 70, 0.25);
	--sc-nav-panel-bg: var(--sc-surface);
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	:root {
		--sc-transition-fast: 0ms;
		--sc-transition-normal: 0ms;
		--sc-transition-slow: 0ms;
	}
}