/*
 * Grifoli website semantic tokens.
 *
 * App semantic role       -> Website semantic token
 * surfacePrimary          -> --color-canvas / --color-surface
 * surfaceSecondary       -> --color-surface-muted
 * elevatedCard            -> --color-surface-elevated
 * textPrimary             -> --color-text-primary
 * textSecondary/Tertiary  -> --color-text-secondary / --color-text-muted
 * accentPrimary           -> --color-accent
 * divider/borderSubtle    -> --color-border-strong / --color-border-subtle
 * PaperBackground noise   -> --texture-opacity and --texture-color
 *
 * Values are intentionally authored here rather than generated from Swift.
 */

:root,
:root[data-theme='light'] {
  color-scheme: light;
  --color-canvas: #f0eadc;
  --color-surface: #f4f1ea;
  --color-surface-elevated: #fffdf7;
  --color-surface-muted: #e9e4d8;
  --color-surface-inverse: #003d43;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #5a5a5a;
  --color-text-muted: #657780;
  --color-text-on-accent: #ffffff;
  --color-text-on-inverse: #f2efe6;
  --color-accent: #003d43;
  --color-accent-hover: #00515a;
  --color-accent-pressed: #002d31;
  --color-accent-soft: #e7f5ea;
  --color-accent-strong: #187c62;
  --color-accent-text-strong: #00634e;
  --color-border-subtle: #e2ded3;
  --color-border-strong: #d6d2c7;
  --color-focus-ring: #c89b3c;
  --color-star: #a86f00;
  --color-disabled: #9da7a2;
  --color-disabled-surface: #e1e4df;
  --color-overlay: #003d43;
  --color-on-overlay: #ffffff;
  --gradient-hero: linear-gradient(135deg, #003d43 0%, #156f56 100%);
  --gradient-accent: linear-gradient(135deg, #003d43 0%, #187c62 100%);
  --texture-color: #003d43;
  --texture-opacity: 0.055;
  --shadow-card: 0 10px 28px rgba(26, 26, 26, 0.1);
  --shadow-elevated: 0 18px 42px rgba(26, 26, 26, 0.16);
  --shadow-overlay: 0 18px 40px rgba(0, 0, 0, 0.22);
  --radius-control: 14px;
  --radius-card: 16px;
  --radius-panel: 24px;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --color-canvas: #121313;
  --color-surface: #1b1e1f;
  --color-surface-elevated: #242829;
  --color-surface-muted: #242829;
  --color-surface-inverse: #f2efe6;
  --color-text-primary: #f2efe6;
  --color-text-secondary: #c6c2b8;
  --color-text-muted: #8a8f92;
  --color-text-on-accent: #07140f;
  --color-text-on-inverse: #121313;
  --color-accent: #4db881;
  --color-accent-hover: #66ca97;
  --color-accent-pressed: #379e6b;
  --color-accent-soft: #20392e;
  --color-accent-strong: #7bd8a5;
  --color-accent-text-strong: #8be0b0;
  --color-border-subtle: #2a2f30;
  --color-border-strong: #3b4445;
  --color-focus-ring: #d9ae70;
  --color-star: #d9ae70;
  --color-disabled: #6f7778;
  --color-disabled-surface: #2a2f30;
  --color-overlay: #1b1e1f;
  --color-on-overlay: #f2efe6;
  --gradient-hero: linear-gradient(135deg, #1b1e1f 0%, #0e3330 100%);
  --gradient-accent: linear-gradient(135deg, #379e6b 0%, #4db881 100%);
  --texture-color: #f2efe6;
  --texture-opacity: 0.025;
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.22);
  --shadow-elevated: 0 18px 42px rgba(0, 0, 0, 0.32);
  --shadow-overlay: 0 18px 40px rgba(0, 0, 0, 0.4);
  --radius-control: 14px;
  --radius-card: 16px;
  --radius-panel: 24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-canvas: #121313;
    --color-surface: #1b1e1f;
    --color-surface-elevated: #242829;
    --color-surface-muted: #242829;
    --color-surface-inverse: #f2efe6;
    --color-text-primary: #f2efe6;
    --color-text-secondary: #c6c2b8;
    --color-text-muted: #8a8f92;
    --color-text-on-accent: #07140f;
    --color-text-on-inverse: #121313;
    --color-accent: #4db881;
    --color-accent-hover: #66ca97;
    --color-accent-pressed: #379e6b;
    --color-accent-soft: #20392e;
    --color-accent-strong: #7bd8a5;
    --color-accent-text-strong: #8be0b0;
    --color-border-subtle: #2a2f30;
    --color-border-strong: #3b4445;
    --color-focus-ring: #d9ae70;
    --color-star: #d9ae70;
    --color-disabled: #6f7778;
    --color-disabled-surface: #2a2f30;
    --color-overlay: #1b1e1f;
    --color-on-overlay: #f2efe6;
    --gradient-hero: linear-gradient(135deg, #1b1e1f 0%, #0e3330 100%);
    --gradient-accent: linear-gradient(135deg, #379e6b 0%, #4db881 100%);
    --texture-color: #f2efe6;
    --texture-opacity: 0.025;
    --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.22);
    --shadow-elevated: 0 18px 42px rgba(0, 0, 0, 0.32);
    --shadow-overlay: 0 18px 40px rgba(0, 0, 0, 0.4);
  }
}