/* Semantic design tokens for recipe site */

:root {
  /* Color palette — neutral/warm foundation */
  --color-bg: #fafaf7;
  --color-surface: #ffffff;
  --color-surface-alt: #f5f5f2;
  --color-text: #2c2c2a;
  --color-text-muted: #6b6b68;
  --color-border: #e8e8e5;
  --color-focus-ring: #4a4a47;

  /* Recipe accent role (semantic).
     Every accented surface uses these four roles, never a raw palette value.
     A recipe may re-declare the whole set locally via [data-recipe-accent],
     which is how one product gets a different personality per recipe. */
  --color-accent: #c25f3c;
  --color-accent-strong: #9c4526;
  --color-accent-soft: #ead4cc;
  --color-accent-tint: #fbf1ec;
  --color-accent-on: #ffffff;

  /* Print-specific */
  --color-print-bg: #ffffff;
  --color-print-text: #000000;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono: 'Menlo', 'Monaco', 'Courier New', monospace;
  --font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;

  /* Typography scale */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-display: clamp(2.25rem, 6vw, 3.75rem);

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;

  /* Content widths */
  --content-width-narrow: 32rem;
  --content-width-normal: 42rem;
  --content-width-wide: 50rem;
  --content-width-page: 72rem;

  /* Focus treatment */
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --focus-outline: var(--focus-outline-width) solid var(--color-focus-ring);

  /* Layout breakpoints */
  --breakpoint-sm: 320px;
  --breakpoint-md: 375px;
  --breakpoint-lg: 768px;
  --breakpoint-xl: 1024px;
  --breakpoint-2xl: 1200px;

  /* Component sizing */
  --control-height-sm: 2rem;
  --control-height-md: 2.5rem;
  --control-height-lg: 3rem;
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1a1a18;
    --color-surface: #2a2a27;
    --color-surface-alt: #35352f;
    --color-text: #f5f5f2;
    --color-text-muted: #a8a8a3;
    --color-border: #3d3d3a;
    --color-focus-ring: #e8e8e5;
    --color-accent: #e59171;
    --color-accent-strong: #f3b79e;
    --color-accent-soft: #4a3129;
    --color-accent-tint: #2b1f1a;
    --color-accent-on: #1a1a18;
  }
}

/* Explicit light theme */
:root[data-theme="light"] {
  --color-bg: #fafaf7;
  --color-surface: #ffffff;
  --color-surface-alt: #f5f5f2;
  --color-text: #2c2c2a;
  --color-text-muted: #6b6b68;
  --color-border: #e8e8e5;
  --color-focus-ring: #4a4a47;
  /* Recipe accent role (semantic).
     Every accented surface uses these four roles, never a raw palette value.
     A recipe may re-declare the whole set locally via [data-recipe-accent],
     which is how one product gets a different personality per recipe. */
  --color-accent: #c25f3c;
  --color-accent-strong: #9c4526;
  --color-accent-soft: #ead4cc;
  --color-accent-tint: #fbf1ec;
  --color-accent-on: #ffffff;
}

/* Explicit dark theme */
:root[data-theme="dark"] {
  --color-bg: #1a1a18;
  --color-surface: #2a2a27;
  --color-surface-alt: #35352f;
  --color-text: #f5f5f2;
  --color-text-muted: #a8a8a3;
  --color-border: #3d3d3a;
  --color-focus-ring: #e8e8e5;
  --color-accent: #e59171;
  --color-accent-strong: #f3b79e;
  --color-accent-soft: #4a3129;
  --color-accent-tint: #2b1f1a;
  --color-accent-on: #1a1a18;
}

/* ---------------------------------------------------------------------------
   Recipe accent personalities

   A recipe page opts in with data-recipe-accent on its <article>. Only the
   accent role tokens are re-declared — layout, spacing, surface, and text
   tokens stay shared, so every recipe reads as the same product.

   Each personality is declared for light, system-dark, and both explicit
   themes, so no accent is ever defined only inside a media query.
   --------------------------------------------------------------------------- */

[data-recipe-accent="olive"] {
  --color-accent: #5f7327;
  --color-accent-strong: #45551a;
  --color-accent-soft: #d8e0bb;
  --color-accent-tint: #f4f6e9;
  --color-accent-on: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-recipe-accent="olive"] {
    --color-accent: #adc563;
    --color-accent-strong: #c9dc8c;
    --color-accent-soft: #3a4420;
    --color-accent-tint: #23281a;
    --color-accent-on: #17190f;
  }
}

:root[data-theme="light"] [data-recipe-accent="olive"] {
  --color-accent: #5f7327;
  --color-accent-strong: #45551a;
  --color-accent-soft: #d8e0bb;
  --color-accent-tint: #f4f6e9;
  --color-accent-on: #ffffff;
}

:root[data-theme="dark"] [data-recipe-accent="olive"] {
  --color-accent: #adc563;
  --color-accent-strong: #c9dc8c;
  --color-accent-soft: #3a4420;
  --color-accent-tint: #23281a;
  --color-accent-on: #17190f;
}

[data-recipe-accent="bronze"] {
  --color-accent: #b3742c;
  --color-accent-strong: #8a5220;
  --color-accent-soft: #e8d2a3;
  --color-accent-tint: #faf4e6;
  --color-accent-on: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-recipe-accent="bronze"] {
    --color-accent: #e0a860;
    --color-accent-strong: #f0c690;
    --color-accent-soft: #4a3820;
    --color-accent-tint: #251c10;
    --color-accent-on: #1f1710;
  }
}

:root[data-theme="light"] [data-recipe-accent="bronze"] {
  --color-accent: #b3742c;
  --color-accent-strong: #8a5220;
  --color-accent-soft: #e8d2a3;
  --color-accent-tint: #faf4e6;
  --color-accent-on: #ffffff;
}

:root[data-theme="dark"] [data-recipe-accent="bronze"] {
  --color-accent: #e0a860;
  --color-accent-strong: #f0c690;
  --color-accent-soft: #4a3820;
  --color-accent-tint: #251c10;
  --color-accent-on: #1f1710;
}

[data-recipe-accent="sage"] {
  --color-accent: #56694a;
  --color-accent-strong: #38452e;
  --color-accent-soft: #d6ddc7;
  --color-accent-tint: #f3f5ee;
  --color-accent-on: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-recipe-accent="sage"] {
    --color-accent: #9fb98a;
    --color-accent-strong: #c0d6a8;
    --color-accent-soft: #3a4530;
    --color-accent-tint: #20261a;
    --color-accent-on: #14170f;
  }
}

:root[data-theme="light"] [data-recipe-accent="sage"] {
  --color-accent: #56694a;
  --color-accent-strong: #38452e;
  --color-accent-soft: #d6ddc7;
  --color-accent-tint: #f3f5ee;
  --color-accent-on: #ffffff;
}

:root[data-theme="dark"] [data-recipe-accent="sage"] {
  --color-accent: #9fb98a;
  --color-accent-strong: #c0d6a8;
  --color-accent-soft: #3a4530;
  --color-accent-tint: #20261a;
  --color-accent-on: #14170f;
}

[data-recipe-accent="saffron"] {
  --color-accent: #9a6a13;
  --color-accent-strong: #6f4a0b;
  --color-accent-soft: #ead7a8;
  --color-accent-tint: #fbf5e6;
  --color-accent-on: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-recipe-accent="saffron"] {
    --color-accent: #d9ab55;
    --color-accent-strong: #f0ca7a;
    --color-accent-soft: #49391e;
    --color-accent-tint: #251d11;
    --color-accent-on: #18130c;
  }
}

:root[data-theme="light"] [data-recipe-accent="saffron"] {
  --color-accent: #9a6a13;
  --color-accent-strong: #6f4a0b;
  --color-accent-soft: #ead7a8;
  --color-accent-tint: #fbf5e6;
  --color-accent-on: #ffffff;
}

:root[data-theme="dark"] [data-recipe-accent="saffron"] {
  --color-accent: #d9ab55;
  --color-accent-strong: #f0ca7a;
  --color-accent-soft: #49391e;
  --color-accent-tint: #251d11;
  --color-accent-on: #18130c;
}