/* Hallmark · tokens · SEO Blitz editorial workbench */
:root {
  /* Surfaces */
  --surface-page: oklch(14.2% 0.026 256);
  --surface-elevated: oklch(18% 0.03 256);
  --surface-card: oklch(19.6% 0.032 256);
  --surface-muted: oklch(23% 0.032 256);
  --surface-input: oklch(12.4% 0.024 256);
  --surface-inverse: oklch(96% 0.012 248);

  /* Text */
  --text-primary: oklch(96% 0.018 250);
  --text-secondary: oklch(78% 0.035 245);
  --text-muted: oklch(66% 0.035 245);
  --text-inverse: oklch(15% 0.035 248);
  --text-danger: oklch(70% 0.18 25);
  --text-success: oklch(76% 0.17 152);
  --text-warning: oklch(79% 0.15 76);

  /* Borders */
  --border-subtle: oklch(25% 0.03 256);
  --border-standard: oklch(30% 0.034 256);
  --border-strong: oklch(43% 0.052 248);
  --border-focus: oklch(78% 0.16 162);

  /* Brand */
  --brand-primary: oklch(70% 0.18 162);
  --brand-primary-hover: oklch(76% 0.17 162);
  --brand-soft-surface: color-mix(in oklch, var(--brand-primary) 13%, transparent);
  --brand-border: color-mix(in oklch, var(--brand-primary) 42%, transparent);
  --brand-text: oklch(79% 0.16 162);
  --brand-on-primary: oklch(13% 0.035 164);

  /* Status */
  --status-success-surface: color-mix(in oklch, oklch(70% 0.17 152) 14%, transparent);
  --status-success-text: oklch(76% 0.17 152);
  --status-success-border: color-mix(in oklch, oklch(70% 0.17 152) 42%, transparent);
  --status-warning-surface: color-mix(in oklch, oklch(78% 0.15 76) 15%, transparent);
  --status-warning-text: oklch(79% 0.15 76);
  --status-warning-border: color-mix(in oklch, oklch(78% 0.15 76) 42%, transparent);
  --status-danger-surface: color-mix(in oklch, oklch(66% 0.19 22) 14%, transparent);
  --status-danger-text: oklch(70% 0.18 25);
  --status-danger-border: color-mix(in oklch, oklch(66% 0.19 22) 42%, transparent);
  --status-info-surface: color-mix(in oklch, oklch(71% 0.14 225) 14%, transparent);
  --status-info-text: oklch(76% 0.13 225);
  --status-info-border: color-mix(in oklch, oklch(71% 0.14 225) 42%, transparent);

  /* Effects */
  --shadow-card: 0 18px 70px rgb(0 0 0 / 0.22);
  --shadow-elevated: 0 28px 90px rgb(0 0 0 / 0.34);
  --ring-focus: 0 0 0 4px color-mix(in oklch, var(--border-focus) 20%, transparent);
  --overlay: color-mix(in oklch, var(--surface-page) 76%, transparent);
  --grain-opacity: 0.08;

  /* Typography */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1.05rem;
  --text-lg: 1.35rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.35rem;
  --text-display: clamp(3.35rem, 9vw, 7.25rem);
  --text-display-s: clamp(2.7rem, 7vw, 5rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 180ms;
  --dur-med: 320ms;

  /* Layout */
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 18px;
  --radius-card: var(--radius-medium);
  --radius-input: 10px;
  --radius-pill: 999px;
  --rule-hairline: 1px;
  --container-width: 82rem;

  /* Legacy aliases kept while page markup is migrated to semantic tokens. */
  --color-paper: var(--surface-page);
  --color-paper-2: var(--surface-elevated);
  --color-paper-3: var(--surface-muted);
  --color-ink: var(--text-primary);
  --color-ink-2: var(--text-secondary);
  --color-muted: var(--text-muted);
  --color-rule: var(--border-standard);
  --color-accent: var(--brand-primary);
  --color-accent-2: var(--brand-primary-hover);
  --color-accent-ink: var(--brand-on-primary);
  --color-focus: var(--border-focus);
  --color-warning: var(--status-warning-text);
  --color-risk: var(--status-danger-text);
}

:root:not(.dark) {
  --surface-page: oklch(98.2% 0.005 250);
  --surface-elevated: oklch(100% 0 0);
  --surface-card: oklch(100% 0 0);
  --surface-muted: oklch(96% 0.008 250);
  --surface-input: oklch(99% 0.006 248);
  --surface-inverse: oklch(15% 0.035 248);

  --text-primary: oklch(18% 0.032 248);
  --text-secondary: oklch(36% 0.034 248);
  --text-muted: oklch(48% 0.03 248);
  --text-inverse: oklch(96% 0.018 250);
  --text-danger: oklch(49% 0.18 25);
  --text-success: oklch(39% 0.14 152);
  --text-warning: oklch(45% 0.13 76);

  --border-subtle: oklch(92% 0.008 250);
  --border-standard: oklch(88% 0.012 250);
  --border-strong: oklch(70% 0.03 248);
  --border-focus: oklch(57% 0.15 162);

  --brand-primary: oklch(47% 0.14 162);
  --brand-primary-hover: oklch(42% 0.13 162);
  --brand-soft-surface: color-mix(in srgb, var(--brand-primary) 10%, var(--surface-elevated));
  --brand-border: color-mix(in srgb, var(--brand-primary) 30%, var(--border-standard));
  --brand-text: oklch(36% 0.13 162);
  --brand-on-primary: oklch(98% 0.01 162);

  --status-success-surface: color-mix(in srgb, oklch(47% 0.14 152) 11%, var(--surface-elevated));
  --status-success-text: oklch(35% 0.13 152);
  --status-success-border: color-mix(in srgb, oklch(47% 0.14 152) 30%, var(--border-standard));
  --status-warning-surface: color-mix(in srgb, oklch(60% 0.14 76) 13%, var(--surface-elevated));
  --status-warning-text: oklch(42% 0.12 76);
  --status-warning-border: color-mix(in srgb, oklch(60% 0.14 76) 30%, var(--border-standard));
  --status-danger-surface: color-mix(in srgb, oklch(55% 0.17 25) 11%, var(--surface-elevated));
  --status-danger-text: oklch(43% 0.16 25);
  --status-danger-border: color-mix(in srgb, oklch(55% 0.17 25) 30%, var(--border-standard));
  --status-info-surface: color-mix(in srgb, oklch(50% 0.12 225) 11%, var(--surface-elevated));
  --status-info-text: oklch(40% 0.11 225);
  --status-info-border: color-mix(in srgb, oklch(50% 0.12 225) 30%, var(--border-standard));

  --shadow-card: 0 18px 55px rgb(15 23 42 / 0.08);
  --shadow-elevated: 0 28px 80px rgb(15 23 42 / 0.13);
  --ring-focus: 0 0 0 4px color-mix(in srgb, var(--border-focus) 18%, transparent);
  --overlay: color-mix(in srgb, var(--surface-page) 82%, transparent);
  --grain-opacity: 0.045;
}