/* ==========================================================================
   Vidra Design System - Single Source of Truth
   /shared/design-system.css
   ========================================================================== */

/* Google Fonts - Space Grotesk (display) + DM Sans (UI body) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* === Typography === */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-reading: 'Source Serif 4', Georgia, serif; /* for guide articles */
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Font sizes - 1.25 Major Third scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.563rem;
  --text-3xl: 1.953rem;
  --text-4xl: 2.441rem;
  --text-5xl: 3.052rem;

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

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.75;

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

  /* === Spacing (4px base) === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* === Layout === */
  --content-sm: 640px;
  --content-md: 768px;
  --content-lg: 960px;
  --content-xl: 1200px;
  --content-2xl: 1400px;

  /* === Borders === */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);

  /* === Transitions === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* === Z-index === */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;

  /* === COLORS - Terracotta Studio (default fallback) === */
  --color-primary: #D4622B;
  --color-primary-hover: #B84F1E;
  --color-primary-light: #FEF0E7;
  --color-primary-rgb: 212, 98, 43;

  --color-accent: #2A7B6F;
  --color-accent-hover: #1F5F55;
  --color-accent-light: #E8F5F3;

  --color-bg: #FDFAF7;
  --color-bg-rgb: 253, 250, 247;
  --color-bg-subtle: #F5EFE8;
  --color-bg-muted: #E6DDD2;
  --color-bg-emphasis: #D4C9BC;

  --color-text: #2C2114;
  --color-text-secondary: #7A6E5F;
  --color-text-muted: #998B7A;
  --color-text-subtle: #B5A898;

  --color-border: #E6DDD2;
  --color-border-muted: #F0E8DD;

  /* Semantic */
  --color-success: #059669;
  --color-success-light: #D1FAE5;
  --color-warning: #D97706;
  --color-warning-light: #FEF3C7;
  --color-error: #DC2626;
  --color-error-light: #FEE2E2;
  --color-info: #0891B2;
  --color-info-light: #CFFAFE;
}

/* ==========================================================================
   Color Palettes - Light Mode
   Each palette overrides the color tokens via [data-palette] selector.
   ========================================================================== */

/* --- Terracotta Studio (warm orange) --- */
[data-palette="terracotta"] {
  --color-primary: #D4622B;
  --color-primary-hover: #B84F1E;
  --color-primary-light: #FEF0E7;
  --color-primary-rgb: 212, 98, 43;

  --color-accent: #2A7B6F;
  --color-accent-hover: #1F5F55;
  --color-accent-light: #E8F5F3;

  --color-bg: #FDFAF7;
  --color-bg-rgb: 253, 250, 247;
  --color-bg-subtle: #F5EFE8;
  --color-bg-muted: #E6DDD2;
  --color-bg-emphasis: #D4C9BC;

  --color-text: #2C2114;
  --color-text-secondary: #7A6E5F;
  --color-text-muted: #998B7A;
  --color-text-subtle: #B5A898;

  --color-border: #E6DDD2;
  --color-border-muted: #F0E8DD;
}

/* --- Midnight Vermilion (bold red) --- */
[data-palette="vermilion"] {
  --color-primary: #C43D2E;
  --color-primary-hover: #A8311F;
  --color-primary-light: #FDF0EE;
  --color-primary-rgb: 196, 61, 46;

  --color-accent: #D49C2A;
  --color-accent-hover: #B8861F;
  --color-accent-light: #FEF7E7;

  --color-bg: #FAF8F6;
  --color-bg-rgb: 250, 248, 246;
  --color-bg-subtle: #F2EDEA;
  --color-bg-muted: #E3DDD8;
  --color-bg-emphasis: #D1CAC4;

  --color-text: #1C1917;
  --color-text-secondary: #6B6560;
  --color-text-muted: #8E8882;
  --color-text-subtle: #ADA7A1;

  --color-border: #E3DDD8;
  --color-border-muted: #EEEBE8;
}

/* --- Amber Workshop (golden) --- */
[data-palette="amber"] {
  --color-primary: #CA8A04;
  --color-primary-hover: #A16207;
  --color-primary-light: #FEF9E7;
  --color-primary-rgb: 202, 138, 4;

  --color-accent: #6D5ACD;
  --color-accent-hover: #5A47B8;
  --color-accent-light: #EFECFA;

  --color-bg: #FCFAF5;
  --color-bg-rgb: 252, 250, 245;
  --color-bg-subtle: #F4F0E6;
  --color-bg-muted: #E8E2D4;
  --color-bg-emphasis: #D6CEBC;

  --color-text: #1A1810;
  --color-text-secondary: #6E6850;
  --color-text-muted: #908A72;
  --color-text-subtle: #ADA790;

  --color-border: #E8E2D4;
  --color-border-muted: #F0ECE0;
}

/* --- Teal Studio (terracotta complement — teal primary) --- */
[data-palette="teal"] {
  --color-primary: #2A7B6F;
  --color-primary-hover: #1F5F55;
  --color-primary-light: #E8F5F3;
  --color-primary-rgb: 42, 123, 111;

  --color-accent: #D4622B;
  --color-accent-hover: #B84F1E;
  --color-accent-light: #FEF0E7;

  --color-bg: #FDFAF7;
  --color-bg-rgb: 253, 250, 247;
  --color-bg-subtle: #F5EFE8;
  --color-bg-muted: #E6DDD2;
  --color-bg-emphasis: #D4C9BC;

  --color-text: #2C2114;
  --color-text-secondary: #7A6E5F;
  --color-text-muted: #998B7A;
  --color-text-subtle: #B5A898;

  --color-border: #E6DDD2;
  --color-border-muted: #F0E8DD;
}

/* --- Gold Vermilion (midnight complement — gold primary) --- */
[data-palette="gold"] {
  --color-primary: #D49C2A;
  --color-primary-hover: #B8861F;
  --color-primary-light: #FEF7E7;
  --color-primary-rgb: 212, 156, 42;

  --color-accent: #C43D2E;
  --color-accent-hover: #A8311F;
  --color-accent-light: #FDF0EE;

  --color-bg: #FAF8F6;
  --color-bg-rgb: 250, 248, 246;
  --color-bg-subtle: #F2EDEA;
  --color-bg-muted: #E3DDD8;
  --color-bg-emphasis: #D1CAC4;

  --color-text: #1C1917;
  --color-text-secondary: #6B6560;
  --color-text-muted: #8E8882;
  --color-text-subtle: #ADA7A1;

  --color-border: #E3DDD8;
  --color-border-muted: #EEEBE8;
}

/* --- Violet Workshop (amber complement — violet primary) --- */
[data-palette="violet"] {
  --color-primary: #6D5ACD;
  --color-primary-hover: #5A47B8;
  --color-primary-light: #EFECFA;
  --color-primary-rgb: 109, 90, 205;

  --color-accent: #CA8A04;
  --color-accent-hover: #A16207;
  --color-accent-light: #FEF9E7;

  --color-bg: #FCFAF5;
  --color-bg-rgb: 252, 250, 245;
  --color-bg-subtle: #F4F0E6;
  --color-bg-muted: #E8E2D4;
  --color-bg-emphasis: #D6CEBC;

  --color-text: #1A1810;
  --color-text-secondary: #6E6850;
  --color-text-muted: #908A72;
  --color-text-subtle: #ADA790;

  --color-border: #E8E2D4;
  --color-border-muted: #F0ECE0;
}

/* --- Monochrome (easter egg — unlocked after seeing all 6) --- */
[data-palette="monochrome"] {
  --color-primary: #171717;
  --color-primary-hover: #262626;
  --color-primary-light: #F5F5F5;
  --color-primary-rgb: 23, 23, 23;

  --color-accent: #525252;
  --color-accent-hover: #404040;
  --color-accent-light: #F5F5F5;

  --color-bg: #FAFAFA;
  --color-bg-rgb: 250, 250, 250;
  --color-bg-subtle: #F5F5F5;
  --color-bg-muted: #E5E5E5;
  --color-bg-emphasis: #D4D4D4;

  --color-text: #171717;
  --color-text-secondary: #525252;
  --color-text-muted: #737373;
  --color-text-subtle: #A3A3A3;

  --color-border: #E5E5E5;
  --color-border-muted: #F5F5F5;
}

/* ==========================================================================
   Color Palettes - Dark Mode
   ========================================================================== */

/* --- Terracotta Studio (dark) --- */
[data-theme="dark"],
[data-theme="dark"][data-palette="terracotta"] {
  --color-primary: #E8864E;
  --color-primary-hover: #D4622B;
  --color-primary-light: #2D1F16;
  --color-primary-rgb: 232, 134, 78;

  --color-accent: #3D9E90;
  --color-accent-hover: #2A7B6F;
  --color-accent-light: #1A2D2A;

  --color-bg: #151210;
  --color-bg-rgb: 21, 18, 16;
  --color-bg-subtle: #1E1A16;
  --color-bg-muted: #362E25;
  --color-bg-emphasis: #4A4035;

  --color-text: #F0E8DD;
  --color-text-secondary: #A89A89;
  --color-text-muted: #8A7D6E;
  --color-text-subtle: #6B6054;

  --color-border: #362E25;
  --color-border-muted: #28221B;

  --color-success: #34D399;
  --color-success-light: #064E3B;
  --color-warning: #FBBF24;
  --color-warning-light: #78350F;
  --color-error: #F87171;
  --color-error-light: #7F1D1D;
  --color-info: #22D3EE;
  --color-info-light: #164E63;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
}

/* --- Midnight Vermilion (dark) --- */
[data-theme="dark"][data-palette="vermilion"] {
  --color-primary: #E05A4A;
  --color-primary-hover: #C43D2E;
  --color-primary-light: #2A1614;
  --color-primary-rgb: 224, 90, 74;

  --color-accent: #E8B44A;
  --color-accent-hover: #D49C2A;
  --color-accent-light: #2A2214;

  --color-bg: #0F0E0D;
  --color-bg-rgb: 15, 14, 13;
  --color-bg-subtle: #1A1816;
  --color-bg-muted: #332E2A;
  --color-bg-emphasis: #48423C;

  --color-text: #EDEBE8;
  --color-text-secondary: #A39E98;
  --color-text-muted: #868179;
  --color-text-subtle: #666059;

  --color-border: #332E2A;
  --color-border-muted: #252220;
}

/* --- Amber Workshop (dark) --- */
[data-theme="dark"][data-palette="amber"] {
  --color-primary: #EAB308;
  --color-primary-hover: #CA8A04;
  --color-primary-light: #221C0A;
  --color-primary-rgb: 234, 179, 8;

  --color-accent: #8B7AE8;
  --color-accent-hover: #6D5ACD;
  --color-accent-light: #1E1A2E;

  --color-bg: #100F0C;
  --color-bg-rgb: 16, 15, 12;
  --color-bg-subtle: #1C1A14;
  --color-bg-muted: #332E22;
  --color-bg-emphasis: #474030;

  --color-text: #F0EDE4;
  --color-text-secondary: #A8A28A;
  --color-text-muted: #8A846E;
  --color-text-subtle: #6B6654;

  --color-border: #332E22;
  --color-border-muted: #26221A;
}

/* --- Teal Studio (dark) --- */
[data-theme="dark"][data-palette="teal"] {
  --color-primary: #3D9E90;
  --color-primary-hover: #2A7B6F;
  --color-primary-light: #1A2D2A;
  --color-primary-rgb: 61, 158, 144;

  --color-accent: #E8864E;
  --color-accent-hover: #D4622B;
  --color-accent-light: #2D1F16;

  --color-bg: #151210;
  --color-bg-rgb: 21, 18, 16;
  --color-bg-subtle: #1E1A16;
  --color-bg-muted: #362E25;
  --color-bg-emphasis: #4A4035;

  --color-text: #F0E8DD;
  --color-text-secondary: #A89A89;
  --color-text-muted: #8A7D6E;
  --color-text-subtle: #6B6054;

  --color-border: #362E25;
  --color-border-muted: #28221B;
}

/* --- Gold Vermilion (dark) --- */
[data-theme="dark"][data-palette="gold"] {
  --color-primary: #E8B44A;
  --color-primary-hover: #D49C2A;
  --color-primary-light: #2A2214;
  --color-primary-rgb: 232, 180, 74;

  --color-accent: #E05A4A;
  --color-accent-hover: #C43D2E;
  --color-accent-light: #2A1614;

  --color-bg: #0F0E0D;
  --color-bg-rgb: 15, 14, 13;
  --color-bg-subtle: #1A1816;
  --color-bg-muted: #332E2A;
  --color-bg-emphasis: #48423C;

  --color-text: #EDEBE8;
  --color-text-secondary: #A39E98;
  --color-text-muted: #868179;
  --color-text-subtle: #666059;

  --color-border: #332E2A;
  --color-border-muted: #252220;
}

/* --- Violet Workshop (dark) --- */
[data-theme="dark"][data-palette="violet"] {
  --color-primary: #8B7AE8;
  --color-primary-hover: #6D5ACD;
  --color-primary-light: #1E1A2E;
  --color-primary-rgb: 139, 122, 232;

  --color-accent: #EAB308;
  --color-accent-hover: #CA8A04;
  --color-accent-light: #221C0A;

  --color-bg: #100F0C;
  --color-bg-rgb: 16, 15, 12;
  --color-bg-subtle: #1C1A14;
  --color-bg-muted: #332E22;
  --color-bg-emphasis: #474030;

  --color-text: #F0EDE4;
  --color-text-secondary: #A8A28A;
  --color-text-muted: #8A846E;
  --color-text-subtle: #6B6654;

  --color-border: #332E22;
  --color-border-muted: #26221A;
}

/* --- Monochrome (dark) --- */
[data-theme="dark"][data-palette="monochrome"] {
  --color-primary: #E5E5E5;
  --color-primary-hover: #D4D4D4;
  --color-primary-light: #262626;
  --color-primary-rgb: 229, 229, 229;

  --color-accent: #A3A3A3;
  --color-accent-hover: #8A8A8A;
  --color-accent-light: #262626;

  --color-bg: #0A0A0A;
  --color-bg-rgb: 10, 10, 10;
  --color-bg-subtle: #171717;
  --color-bg-muted: #262626;
  --color-bg-emphasis: #404040;

  --color-text: #FAFAFA;
  --color-text-secondary: #A3A3A3;
  --color-text-muted: #737373;
  --color-text-subtle: #525252;

  --color-border: #262626;
  --color-border-muted: #1A1A1A;
}

/* ==========================================================================
   Monochrome CTA Button Override
   In light mode: dark primary with white text.
   In dark mode: light primary with dark text.
   ========================================================================== */

[data-palette="monochrome"] .btn--primary {
  color: #FFFFFF;
}

[data-theme="dark"][data-palette="monochrome"] .btn--primary {
  color: #0A0A0A;
}

/* ==========================================================================
   Base Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

small {
  font-size: var(--text-sm);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-subtle);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Selection
   ========================================================================== */

::selection {
  background: rgba(var(--color-primary-rgb), 0.15);
  color: var(--color-text);
}

/* ==========================================================================
   Focus styles
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Scrollbar (subtle)
   ========================================================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-bg-emphasis);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-subtle);
}