/* Semantic aliases — the Stria rebrand.
   The site runs a burgundy glass hero over a clean light body, so LIGHT IS THE DEFAULT theme
   (body sections, docs, cards). [data-theme="dark"] is the deep-red glass ground used by the
   header, hero and any cinematic dark section. */
:root,
[data-theme="light"] {
  --bg-page: var(--brand-paper);
  --bg-sunken: var(--neutral-100);
  --surface-card: var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-inverse: var(--ink-page);
  --surface-tint: var(--red-50);
  --surface-black: var(--ink-black);

  --text-primary: var(--neutral-950);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--neutral-25);
  --text-brand: var(--red-600);
  --text-accent: var(--red-500);

  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand: var(--red-300);

  --brand-primary: var(--brand-red);
  --brand-primary-hover: var(--red-600);
  --brand-primary-press: var(--red-700);
  --brand-soft: var(--red-50);
  --brand-soft-hover: var(--red-100);
  --on-brand: #ffffff;

  --accent: var(--brand-red);
  --accent-hover: var(--red-600);
  --accent-press: var(--red-700);
  --accent-soft: var(--red-50);
  --on-accent: #ffffff;

  --success: var(--green-600);
  --success-soft: var(--green-100);
  --warning: var(--amber-600);
  --warning-soft: var(--amber-100);
  --danger: var(--red-600);
  --danger-soft: var(--red-50);

  --link: var(--red-600);
  --link-hover: var(--red-700);

  /* liquid glass: on light, a warm-white frost with a lit top edge */
  --glass-fill: rgba(255, 255, 255, 0.6);
  --glass-fill-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-highlight: rgba(255, 255, 255, 0.85);

  --overlay: rgba(26, 6, 12, 0.4);
  --scrim: linear-gradient(to top, rgba(26, 6, 12, 0.72), rgba(26, 6, 12, 0)); /* @kind other */

  --shadow-xs: 0 1px 2px rgba(51, 6, 14, 0.06);
  --shadow-sm: 0 1px 3px rgba(51, 6, 14, 0.08), 0 1px 2px -1px rgba(51, 6, 14, 0.05);
  --shadow-md: 0 6px 16px -4px rgba(51, 6, 14, 0.1), 0 2px 5px -2px rgba(51, 6, 14, 0.06);
  --shadow-lg: 0 16px 40px -10px rgba(51, 6, 14, 0.14), 0 4px 10px -4px rgba(51, 6, 14, 0.07);
  --shadow-xl: 0 32px 70px -18px rgba(51, 6, 14, 0.18), 0 8px 18px -8px rgba(51, 6, 14, 0.08);
  --focus-ring: 0 0 0 3px rgba(224, 23, 51, 0.4);
}

[data-theme="dark"] {
  --bg-page: var(--ink-page);
  --bg-sunken: var(--ink-base);
  --surface-card: var(--ink-card);
  --surface-raised: var(--ink-raised);
  --surface-inverse: var(--neutral-25);
  --surface-tint: #2e0b14;
  --surface-black: var(--ink-black);

  --text-primary: #fdf2f3;
  --text-secondary: #e2b8bd;
  --text-muted: #b98a90;
  --text-inverse: var(--ink-page);
  --text-brand: var(--red-300);
  --text-accent: var(--brand-crimson);

  --border-subtle: var(--ink-line);
  --border-strong: #63202e;
  --border-brand: var(--red-700);

  --brand-primary: var(--brand-crimson);
  --brand-primary-hover: #ff5262;
  --brand-primary-press: var(--red-500);
  --brand-soft: #3a0f19;
  --brand-soft-hover: #4a141f;
  --on-brand: #1a060c;

  --accent: var(--brand-crimson);
  --accent-hover: #ff5262;
  --accent-press: var(--red-500);
  --accent-soft: #3a0f19;
  --on-accent: #1a060c;

  --success: var(--green-500);
  --success-soft: #113023;
  --warning: var(--amber-500);
  --warning-soft: #33260f;
  --danger: var(--brand-crimson);
  --danger-soft: #3a0f19;

  --link: var(--red-300);
  --link-hover: #ffc0c7;

  /* liquid glass: on burgundy, a deep-red frost with a lit top edge */
  --glass-fill: rgba(61, 8, 22, 0.55);
  --glass-fill-strong: rgba(77, 12, 24, 0.72);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-highlight: rgba(255, 255, 255, 0.18);

  --overlay: rgba(6, 2, 3, 0.68);
  --scrim: linear-gradient(to top, rgba(6, 2, 3, 0.85), rgba(6, 2, 3, 0)); /* @kind other */

  --shadow-xs: 0 1px 2px rgba(4, 1, 2, 0.55);
  --shadow-sm: 0 1px 3px rgba(4, 1, 2, 0.6);
  --shadow-md: 0 6px 18px -4px rgba(4, 1, 2, 0.65);
  --shadow-lg: 0 16px 40px -10px rgba(4, 1, 2, 0.7);
  --shadow-xl: 0 32px 70px -18px rgba(4, 1, 2, 0.75);
  --focus-ring: 0 0 0 3px rgba(255, 53, 70, 0.55);
}