/* WCAG 2.2 AA design tokens — light + dark (source of truth) */

:root {
  /* Brand */
  --accent: #d63031;
  --accent-hover: #b71c1c;
  /* Links: darker red passes 4.5:1 on white and soft surfaces */
  --link: #9b2223;
  --link-hover: #7f1d1d;
  --link-decoration: rgba(155, 34, 35, 0.35);

  /* Typography */
  --ink: #1a1f24;
  --ink-muted: #4a5560;
  --ink-subtle: #5c6570;

  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-sm: 0.9375rem;
  --text-xs: 0.875rem;
  --leading-body: 1.65;
  --leading-ui: 1.5;
  --leading-heading: 1.25;
  --paragraph-gap: 2em;
  --measure: 70ch;
  --measure-narrow: 55ch;

  /* Spacing scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-section: clamp(3rem, 6vw, 5.5rem);
  --space-gutter: clamp(1.25rem, 5vw, 4rem);
  --list-gap: 0.625em;
  --section-gap: 1.5em;

  /* Radius & motion */
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --transition: 0.2s ease;
  --transition-smooth: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;

  /* Surfaces */
  --surface: #ffffff;
  --surface-soft: #f7f5f2;
  --surface-band: #efeae4;
  --surface-elevated: #ffffff;

  /* Lines & shadows */
  --line: rgba(26, 31, 36, 0.1);
  --line-strong: rgba(26, 31, 36, 0.16);
  --shadow-soft: 0 1px 3px rgba(26, 31, 36, 0.06);
  --shadow-md: 0 8px 24px rgba(26, 31, 36, 0.08);
  --shadow-lg: 0 20px 50px rgba(26, 31, 36, 0.1);

  /* Focus ring */
  --focus-ring: #d63031;
  --focus-offset: 2px;

  --button-primary-bg: #d63031;
  --button-primary-fg: #ffffff;
  --button-outline: var(--link);
  --button-outline-hover: var(--link-hover);
  --button-min-height: 2.75rem;
  --button-min-height-sm: 2.25rem;
  --focus-shadow: 0 0 0 3px rgba(214, 48, 49, 0.12);

  /* Legacy aliases */
  --primary-red: var(--accent);
  --hover-red: var(--accent-hover);
  --brand-accent: var(--accent);
  --brand-dark: var(--ink);
  --brand-text: var(--ink-muted);

  color-scheme: light;
}

/* OS dark preference (when user has not forced light) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #e84545;
    --accent-hover: #ff6b6b;
    --link: #ff8a8b;
    --link-hover: #ffb4b4;
    --link-decoration: rgba(255, 138, 139, 0.4);

    --ink: #f0f2f5;
    --ink-muted: #c5cad3;
    --ink-subtle: #a8b0bc;

    --surface: #12151a;
    --surface-soft: #1a1f26;
    --surface-band: #222830;
    --surface-elevated: #1e232b;

    --line: rgba(240, 242, 245, 0.1);
    --line-strong: rgba(240, 242, 245, 0.16);
    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);

    --focus-ring: #ff8a8b;

    --button-primary-bg: #b71c1c;
    --button-primary-fg: #ffffff;

    color-scheme: dark;
  }
}

/* Manual dark override */
[data-theme="dark"] {
  --accent: #e84545;
  --accent-hover: #ff6b6b;
  --link: #ff8a8b;
  --link-hover: #ffb4b4;
  --link-decoration: rgba(255, 138, 139, 0.4);

  --ink: #f0f2f5;
  --ink-muted: #c5cad3;
  --ink-subtle: #a8b0bc;

  --surface: #12151a;
  --surface-soft: #1a1f26;
  --surface-band: #222830;
  --surface-elevated: #1e232b;

  --line: rgba(240, 242, 245, 0.1);
  --line-strong: rgba(240, 242, 245, 0.16);
  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);

  --focus-ring: #ff8a8b;

  --button-primary-bg: #b71c1c;
  --button-primary-fg: #ffffff;

  color-scheme: dark;
}

/* Manual light override (wins over OS dark) */
[data-theme="light"] {
  --accent: #d63031;
  --accent-hover: #b71c1c;
  --link: #9b2223;
  --link-hover: #7f1d1d;
  --link-decoration: rgba(155, 34, 35, 0.35);

  --ink: #1a1f24;
  --ink-muted: #4a5560;
  --ink-subtle: #5c6570;

  --surface: #ffffff;
  --surface-soft: #f7f5f2;
  --surface-band: #efeae4;
  --surface-elevated: #ffffff;

  --line: rgba(26, 31, 36, 0.1);
  --line-strong: rgba(26, 31, 36, 0.16);
  --shadow-soft: 0 1px 3px rgba(26, 31, 36, 0.06);
  --shadow-md: 0 8px 24px rgba(26, 31, 36, 0.08);

  --focus-ring: #d63031;

  color-scheme: light;
}