/* ============================================================
   LangastoreCreation — Design Tokens
   ============================================================ */

:root {
  color-scheme: light;
  --color-bg: #FAF4EC;
  --color-surface: #FFFDF9;
  --color-surface-alt: #F0E6D8;
  --color-text: #1C110A;
  --color-text-secondary: #3D2314;
  --color-muted: #8A7060;
  --color-primary: #B85C38;
  --color-primary-hover: #9E4D2E;
  --color-accent: #D4922A;
  --color-border: #E8D8C8;
  --color-success: #3A7D44;
  --color-warning: #C47C10;
  --color-error: #B83232;
  --color-info: #2D5FA0;
  --shadow-card: 0 12px 30px rgba(28, 17, 10, 0.08);
  --shadow-hover: 0 18px 40px rgba(28, 17, 10, 0.13);
  --shadow-modal: 0 24px 70px rgba(28, 17, 10, 0.2);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-hero: 32px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --duration-fast: 160ms;
  --duration-standard: 220ms;
  --duration-emphasis: 320ms;
  --duration-base: var(--duration-standard);
  --duration-slow: var(--duration-emphasis);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --font-heading: "Fraunces", "Georgia", serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --max-width: 1240px;
  --container-max: 1240px;
  --nav-height: 64px;
  --section-gap-sm: 56px;
  --section-gap: 88px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 44px;
  --text-5xl: 56px;
  --text-6xl: 72px;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;
  --bg-page: var(--color-bg);
  --bg-card: var(--color-surface);
  --bg-card-tinted: var(--color-surface-alt);
  --bg-input: var(--color-surface-alt);
  --bg-overlay: rgba(255, 253, 249, 0.88);
  --bg-nav: rgba(255, 253, 249, 0.92);
  --bg-nav-scrolled: rgba(255, 253, 249, 0.98);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-muted);
  --text-placeholder: rgba(138, 112, 96, 0.8);
  --text-inverse: #FFFFFF;
  --text-on-accent: #FFFFFF;
  --border-subtle: rgba(61, 35, 20, 0.08);
  --border-default: rgba(61, 35, 20, 0.14);
  --border-strong: rgba(61, 35, 20, 0.22);
  --border-focus: rgba(184, 92, 56, 0.35);
  --btn-primary-bg: var(--color-primary);
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: var(--color-primary-hover);
  --btn-secondary-bg: var(--color-surface-alt);
  --btn-secondary-text: var(--color-text);
  --btn-secondary-hover: rgba(184, 92, 56, 0.08);
  --btn-accent-from: var(--color-primary);
  --btn-accent-to: var(--color-accent);
  --btn-danger-bg: rgba(184, 50, 50, 0.08);
  --btn-danger-text: var(--color-error);
  --btn-danger-hover: var(--color-error);
  --btn-danger-hover-text: #FFFFFF;
  --gradient-hero: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-warm: linear-gradient(180deg, rgba(240, 230, 216, 0.6) 0%, var(--color-bg) 100%);
  --gradient-accent: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  --gradient-card: linear-gradient(180deg, var(--color-surface) 0%, rgba(240, 230, 216, 0.7) 100%);
  --shadow-nav: 0 10px 30px rgba(28, 17, 10, 0.08);
  --shadow-input-focus: 0 0 0 3px rgba(184, 92, 56, 0.15);
  --shadow-btn: 0 10px 20px rgba(184, 92, 56, 0.18);
  --color-clay: var(--color-primary);
  --color-amber: var(--color-accent);
  --color-teal: #2D5FA0;
  --color-sand: rgba(184, 92, 56, 0.08);
  --color-ink: var(--color-text);
  --color-n900: #1C110A;
  --color-n800: #3D2314;
  --color-n700: #5E4030;
  --color-n500: #8A7060;
  --color-n300: #D9C3AF;
  --color-n200: #E8D8C8;
  --color-n100: #F6EEE4;
  --color-white: #FFFFFF;
  --color-success-bg: rgba(58, 125, 68, 0.14);
  --color-warning-bg: rgba(196, 124, 16, 0.14);
  --color-error-bg: rgba(184, 50, 50, 0.14);
  --color-info-bg: rgba(45, 95, 160, 0.14);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #120C07;
  --color-surface: #1E1410;
  --color-surface-alt: #2A1A10;
  --color-text: #F2E4D0;
  --color-text-secondary: #D3BEAF;
  --color-muted: #A08878;
  --color-primary: #C96B40;
  --color-primary-hover: #DD7D50;
  --color-accent: #E2A84A;
  --color-border: #3A2518;
  --color-success: #6BB77A;
  --color-warning: #E3B04F;
  --color-error: #E07070;
  --color-info: #7AA7E5;
  --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.55);
  --bg-page: var(--color-bg);
  --bg-card: var(--color-surface);
  --bg-card-tinted: var(--color-surface-alt);
  --bg-input: var(--color-surface-alt);
  --bg-overlay: rgba(18, 12, 7, 0.88);
  --bg-nav: rgba(30, 20, 16, 0.92);
  --bg-nav-scrolled: rgba(30, 20, 16, 0.98);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-muted);
  --text-placeholder: rgba(211, 190, 175, 0.8);
  --text-inverse: #120C07;
  --border-subtle: rgba(242, 228, 208, 0.08);
  --border-default: rgba(242, 228, 208, 0.14);
  --border-strong: rgba(242, 228, 208, 0.24);
  --border-focus: rgba(201, 107, 64, 0.35);
  --btn-primary-bg: var(--color-primary);
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: var(--color-primary-hover);
  --btn-secondary-bg: var(--color-surface-alt);
  --btn-secondary-text: var(--color-text);
  --btn-secondary-hover: rgba(242, 228, 208, 0.06);
  --btn-danger-bg: rgba(224, 112, 112, 0.12);
  --btn-danger-text: var(--color-error);
  --gradient-warm: linear-gradient(180deg, rgba(42, 26, 16, 0.85) 0%, var(--color-bg) 100%);
  --shadow-nav: 0 18px 40px rgba(0, 0, 0, 0.35);
  --shadow-input-focus: 0 0 0 3px rgba(201, 107, 64, 0.18);
  --shadow-btn: 0 10px 20px rgba(201, 107, 64, 0.22);
  --color-sand: rgba(201, 107, 64, 0.14);
  --color-ink: var(--color-text);
  --color-n900: #F2E4D0;
  --color-n800: #D3BEAF;
  --color-n700: #B09A8C;
  --color-n500: #8A7060;
  --color-n300: #5A4336;
  --color-n200: #3A2518;
  --color-n100: #2A1A10;
  --color-success-bg: rgba(107, 183, 122, 0.14);
  --color-warning-bg: rgba(227, 176, 79, 0.14);
  --color-error-bg: rgba(224, 112, 112, 0.14);
  --color-info-bg: rgba(122, 167, 229, 0.14);
}