/*
 * Semantic tokens: color scheme via html[data-color-scheme]
 * Accent saturation comes from .ds-body.accent-* (02-accents.css)
 */
.ds-root {
  --ds-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* Ghost Admin font settings (Brand → Typography) — map to design system */
  --gh-font-heading: var(--ds-font-sans);
  --gh-font-body: var(--ds-font-sans);
  --ds-font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;
  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 16px;
  --ds-radius-full: 9999px;
  --ds-content-width: 42rem;
  --ds-wide-width: 72rem;
  --ds-header-height: 4rem;
  /* Form / overlay primitives (React design system + Storybook) */
  --ds-control-height: 2.5rem;
  --ds-control-padding-x: var(--ds-space-3);
  --ds-z-dropdown: 100;
  --ds-z-popover: 110;
  --ds-z-modal: 200;
  --ds-z-toast: 300;
  /* Motion primitives */
  --ds-duration-instant: 0ms;
  --ds-duration-fast: 150ms;
  --ds-duration-base: 200ms;
  --ds-duration-slow: 250ms;
  --ds-duration-spin: 700ms;
  --ds-duration-shimmer: 1150ms;
  --ds-ease-linear: linear;
  --ds-ease-standard: ease;
  --ds-ease-emphasized: ease-in-out;
  --ds-ease-decelerated: cubic-bezier(0, 0, 0.2, 1);
  --ds-motion-hover-y-sm: -1px;
  --ds-motion-hover-y: -2px;
  --ds-motion-enter-y: 0.5rem;
  --ds-motion-press-y: 1px;
  --ds-motion-exit-y: -0.25rem;
  --ds-motion-shake-x: 0.25rem;
  --ds-animation-spin: ds-spin var(--ds-duration-spin) var(--ds-ease-linear) infinite;
  --ds-animation-shimmer: ds-skeleton-shimmer var(--ds-duration-shimmer) var(--ds-ease-emphasized) infinite;
  --ds-animation-enter: ds-toast-in var(--ds-duration-slow) var(--ds-ease-decelerated);
}

/* --- Light (explicit) --- */
html[data-color-scheme="light"] {
  color-scheme: light;
  --ds-surface-0: hsl(210 20% 98%);
  --ds-surface-1: hsl(210 16% 100%);
  --ds-surface-2: hsl(210 14% 96%);
  --ds-surface-elevated: hsl(210 12% 100%);
  --ds-color-fg: hsl(220 18% 12%);
  --ds-color-muted: hsl(220 10% 40%);
  --ds-color-faint: hsl(220 8% 55%);
  --ds-color-border: hsl(220 12% 88%);
  --ds-color-border-strong: hsl(220 12% 78%);
  --ds-color-accent: hsl(var(--ds-accent-h) var(--ds-accent-s) 40%);
  --ds-color-accent-fg: hsl(0 0% 100%);
  --ds-color-accent-muted: hsl(var(--ds-accent-h) var(--ds-accent-s) 94%);
  --ds-color-focus: hsl(var(--ds-accent-h) var(--ds-accent-s) 36%);
  /* Fixed accent tones for contrastive UI actions (independent of accent_preset) */
  --ds-color-emerald: hsl(152 44% 40%);
  --ds-color-emerald-fg: hsl(0 0% 100%);
  --ds-color-lavender: hsl(268 52% 40%);
  --ds-color-lavender-fg: hsl(0 0% 100%);
  --ds-shadow-sm: 0 1px 2px hsl(220 16% 12% / 0.06);
  --ds-shadow-md: 0 8px 24px hsl(220 16% 12% / 0.08);
  --ds-color-warning: hsl(28 90% 38%);
  --ds-color-warning-muted: hsl(28 85% 94%);
  --ds-color-warning-border: hsl(28 55% 78%);
  --ds-color-danger: hsl(0 72% 40%);
  --ds-color-danger-muted: hsl(0 65% 95%);
  --ds-color-danger-border: hsl(0 55% 80%);
}

/* --- Dark (explicit) --- */
html[data-color-scheme="dark"] {
  color-scheme: dark;
  --ds-surface-0: hsl(222 16% 8%);
  --ds-surface-1: hsl(222 14% 10%);
  --ds-surface-2: hsl(222 12% 14%);
  --ds-surface-elevated: hsl(222 12% 12%);
  --ds-color-fg: hsl(210 20% 96%);
  --ds-color-muted: hsl(215 12% 72%);
  --ds-color-faint: hsl(215 10% 55%);
  --ds-color-border: hsl(220 10% 22%);
  --ds-color-border-strong: hsl(220 10% 32%);
  --ds-color-accent: hsl(var(--ds-accent-h) var(--ds-accent-s) 58%);
  --ds-color-accent-fg: hsl(222 16% 8%);
  --ds-color-accent-muted: hsl(var(--ds-accent-h) 28% 18%);
  --ds-color-focus: hsl(var(--ds-accent-h) var(--ds-accent-s) 70%);
  --ds-color-emerald: hsl(152 44% 58%);
  --ds-color-emerald-fg: hsl(222 16% 8%);
  --ds-color-lavender: hsl(268 52% 58%);
  --ds-color-lavender-fg: hsl(0 0% 100%);
  --ds-shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.35);
  --ds-shadow-md: 0 12px 40px hsl(0 0% 0% / 0.45);
  --ds-color-warning: hsl(28 88% 58%);
  --ds-color-warning-muted: hsl(28 45% 16%);
  --ds-color-warning-border: hsl(28 40% 32%);
  --ds-color-danger: hsl(0 72% 62%);
  --ds-color-danger-muted: hsl(0 40% 16%);
  --ds-color-danger-border: hsl(0 38% 36%);
}

/* --- System → light --- */
@media (prefers-color-scheme: light) {
  html[data-color-scheme="system"] {
    color-scheme: light;
    --ds-surface-0: hsl(210 20% 98%);
    --ds-surface-1: hsl(210 16% 100%);
    --ds-surface-2: hsl(210 14% 96%);
    --ds-surface-elevated: hsl(210 12% 100%);
    --ds-color-fg: hsl(220 18% 12%);
    --ds-color-muted: hsl(220 10% 40%);
    --ds-color-faint: hsl(220 8% 55%);
    --ds-color-border: hsl(220 12% 88%);
    --ds-color-border-strong: hsl(220 12% 78%);
    --ds-color-accent: hsl(var(--ds-accent-h) var(--ds-accent-s) 40%);
    --ds-color-accent-fg: hsl(0 0% 100%);
    --ds-color-accent-muted: hsl(var(--ds-accent-h) var(--ds-accent-s) 94%);
    --ds-color-focus: hsl(var(--ds-accent-h) var(--ds-accent-s) 36%);
    --ds-color-emerald: hsl(152 44% 40%);
    --ds-color-emerald-fg: hsl(0 0% 100%);
    --ds-color-lavender: hsl(268 52% 40%);
    --ds-color-lavender-fg: hsl(0 0% 100%);
    --ds-shadow-sm: 0 1px 2px hsl(220 16% 12% / 0.06);
    --ds-shadow-md: 0 8px 24px hsl(220 16% 12% / 0.08);
    --ds-color-warning: hsl(28 90% 38%);
    --ds-color-warning-muted: hsl(28 85% 94%);
    --ds-color-warning-border: hsl(28 55% 78%);
    --ds-color-danger: hsl(0 72% 40%);
    --ds-color-danger-muted: hsl(0 65% 95%);
    --ds-color-danger-border: hsl(0 55% 80%);
  }
}

/* --- System → dark --- */
@media (prefers-color-scheme: dark) {
  html[data-color-scheme="system"] {
    color-scheme: dark;
    --ds-surface-0: hsl(222 16% 8%);
    --ds-surface-1: hsl(222 14% 10%);
    --ds-surface-2: hsl(222 12% 14%);
    --ds-surface-elevated: hsl(222 12% 12%);
    --ds-color-fg: hsl(210 20% 96%);
    --ds-color-muted: hsl(215 12% 72%);
    --ds-color-faint: hsl(215 10% 55%);
    --ds-color-border: hsl(220 10% 22%);
    --ds-color-border-strong: hsl(220 10% 32%);
    --ds-color-accent: hsl(var(--ds-accent-h) var(--ds-accent-s) 58%);
    --ds-color-accent-fg: hsl(222 16% 8%);
    --ds-color-accent-muted: hsl(var(--ds-accent-h) 28% 18%);
    --ds-color-focus: hsl(var(--ds-accent-h) var(--ds-accent-s) 70%);
    --ds-color-emerald: hsl(152 44% 58%);
    --ds-color-emerald-fg: hsl(222 16% 8%);
    --ds-color-lavender: hsl(268 52% 58%);
    --ds-color-lavender-fg: hsl(0 0% 100%);
    --ds-shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.35);
    --ds-shadow-md: 0 12px 40px hsl(0 0% 0% / 0.45);
    --ds-color-warning: hsl(28 88% 58%);
    --ds-color-warning-muted: hsl(28 45% 16%);
    --ds-color-warning-border: hsl(28 40% 32%);
    --ds-color-danger: hsl(0 72% 62%);
    --ds-color-danger-muted: hsl(0 40% 16%);
    --ds-color-danger-border: hsl(0 38% 36%);
  }
}

body.ds-body {
  background: var(--ds-surface-0);
  color: var(--ds-color-fg);
  font-family: var(--gh-font-body), var(--ds-font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  transition:
    background-color var(--ds-duration-base) var(--ds-ease-standard),
    color var(--ds-duration-base) var(--ds-ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  .ds-root {
    --ds-duration-fast: 0.01ms;
    --ds-duration-base: 0.01ms;
    --ds-duration-slow: 0.01ms;
    --ds-duration-spin: 0.01ms;
    --ds-duration-shimmer: 0.01ms;
    --ds-motion-hover-y-sm: 0;
    --ds-motion-hover-y: 0;
    --ds-motion-enter-y: 0;
    --ds-motion-press-y: 0;
    --ds-motion-exit-y: 0;
    --ds-motion-shake-x: 0;
    --ds-animation-spin: none;
    --ds-animation-shimmer: none;
    --ds-animation-enter: none;
  }
}