/* ============ COLOR ============ */
:root{
  /* Base neutrals */
  --black:#000000;        /* pure black — primary background */
  --ink-900:#0a0a0a;      /* near black */
  --ink-800:#101010;      /* deep gray — elevated surface */
  --ink-700:#1a1a1a;      /* card / panel on black */
  --ink-600:#2a2a2a;      /* hairline on dark, subtle fills */
  --gray-500:#6b6b6b;     /* disabled / muted */
  --gray-400:#a0a0a0;     /* secondary text (dark bg) */
  --gray-300:#cccccc;     /* body text (dark bg) */
  --gray-200:#e5e5e5;     /* light divider */
  --white:#ffffff;        /* primary text / light background */

  /* Brand accent — dusty crimson (from red-theme sections) */
  --red-600:#a5324a;      /* pressed */
  --red-500:#bb415a;      /* accent base */
  --red-400:#cc5b71;      /* hover / tint */

  /* ---- Semantic aliases: DARK theme (default) ---- */
  --bg:var(--black);
  --bg-elevated:var(--ink-800);
  --surface-card:var(--ink-700);
  --text-primary:var(--white);
  --text-body:var(--gray-300);
  --text-secondary:var(--gray-400);
  --text-muted:var(--gray-500);
  --accent:var(--red-500);
  --accent-hover:var(--red-400);
  --accent-press:var(--red-600);
  --border-hairline:rgba(255,255,255,.16);
  --border-strong:var(--white);
  --divider:rgba(255,255,255,.18);
  --on-accent:var(--white);
}

/* ---- LIGHT theme (dividers / editorial sections) ---- */
.theme-light,[data-theme="light"]{
  --bg:var(--white);
  --bg-elevated:#f4f4f4;
  --surface-card:var(--white);
  --text-primary:var(--black);
  --text-body:#333333;
  --text-secondary:#666666;
  --text-muted:var(--gray-500);
  --border-hairline:rgba(0,0,0,.16);
  --border-strong:var(--black);
  --divider:rgba(0,0,0,.85);
  --on-accent:var(--white);
}

/* ---- RED theme (statement carousel / feature sections) ---- */
.theme-red,[data-theme="red"]{
  --bg:var(--red-500);
  --bg-elevated:var(--red-600);
  --surface-card:var(--white);
  --text-primary:var(--white);
  --text-body:rgba(255,255,255,.9);
  --text-secondary:rgba(255,255,255,.75);
  --border-hairline:rgba(255,255,255,.35);
  --border-strong:var(--white);
  --divider:rgba(255,255,255,.6);
  --on-accent:var(--red-500);
}