/* Alexander Redesign — Design Tokens
   Palette: Warm cream, blush rose, terracotta, sage, deep charcoal
   Concept: Light, personal, magazine-worthy California coastal
*/

:root,
[data-theme='light'] {
  /* Surfaces — warm white, not clinical */
  --color-bg: #fdf9f5;
  --color-surface: #fefcf9;
  --color-surface-2: #fff8f4;
  --color-surface-offset: #f5ede4;
  --color-surface-offset-2: #ede3d8;
  --color-divider: #e2d5c8;
  --color-border: #d8c9ba;

  /* Text */
  --color-text: #2c2420;
  --color-text-muted: #7a6b60;
  --color-text-faint: #b8a899;
  --color-text-inverse: #fdf9f5;

  /* Primary accent — terracotta rose */
  --color-primary: #b85c42;
  --color-primary-hover: #9a4632;
  --color-primary-active: #7d3325;
  --color-primary-highlight: #f2ddd6;

  /* Secondary — dusty sage */
  --color-secondary: #7a9178;
  --color-secondary-hover: #5f7a5d;
  --color-secondary-highlight: #dce8da;

  /* Blush accent */
  --color-blush: #e8c5b8;
  --color-blush-deep: #d4a090;

  /* Cool contrast — muted steel blue-gray (desaturated, sophisticated) */
  --color-cool: #5b7a8a;
  --color-cool-hover: #486470;
  --color-cool-highlight: #dce6ea;
  --color-cool-surface: #3d5663;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows — warm toned */
  --shadow-sm: 0 1px 3px oklch(0.25 0.03 30 / 0.08);
  --shadow-md: 0 4px 16px oklch(0.25 0.03 30 / 0.1);
  --shadow-lg: 0 12px 40px oklch(0.25 0.03 30 / 0.14);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;

  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 7rem);

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

  /* Fonts */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Jost', 'Helvetica Neue', sans-serif;
}

[data-theme='dark'] {
  --color-bg: #1a1512;
  --color-surface: #201c18;
  --color-surface-2: #251f1b;
  --color-surface-offset: #2a2320;
  --color-surface-offset-2: #2f2824;
  --color-divider: #3a302b;
  --color-border: #4a3e38;
  --color-text: #f0e8e0;
  --color-text-muted: #9e8e84;
  --color-text-faint: #5e504a;
  --color-text-inverse: #1a1512;
  --color-primary: #d4826a;
  --color-primary-hover: #c06a52;
  --color-primary-active: #a8523c;
  --color-primary-highlight: #3d2820;
  --color-secondary: #8faa8d;
  --color-secondary-hover: #6f8f6d;
  --color-secondary-highlight: #243324;
  --color-blush: #8a5e54;
  --color-blush-deep: #6e4840;
  --color-cool: #6fa3c4;
  --color-cool-hover: #5a8fb0;
  --color-cool-highlight: #1e3a4f;
  --color-cool-surface: #162a3a;
  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.25);
  --shadow-md: 0 4px 16px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 12px 40px oklch(0 0 0 / 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #1a1512;
    --color-surface: #201c18;
    --color-surface-2: #251f1b;
    --color-surface-offset: #2a2320;
    --color-surface-offset-2: #2f2824;
    --color-divider: #3a302b;
    --color-border: #4a3e38;
    --color-text: #f0e8e0;
    --color-text-muted: #9e8e84;
    --color-text-faint: #5e504a;
    --color-text-inverse: #1a1512;
    --color-primary: #d4826a;
    --color-primary-hover: #c06a52;
    --color-primary-active: #a8523c;
    --color-primary-highlight: #3d2820;
    --color-secondary: #8faa8d;
    --color-secondary-hover: #6f8f6d;
    --color-secondary-highlight: #243324;
    --color-blush: #8a5e54;
    --color-blush-deep: #6e4840;
  }
}