:root {
  /* ── Base palette: ink (neutros quase-preto, levemente quentes) ───── */
  --ink-950: #0B0B0B; /* fundo principal */
  --ink-900: #151414; /* superfícies / cards */
  --ink-850: #1B1A1A; /* card hover */
  --ink-800: #221F1F; /* superfície afundada (inputs) */
  --ink-700: #302B2B; /* bordas */
  --ink-600: #423C3C;

  /* ── Base palette: sand (neutros claros, quentes) ─────────────────── */
  --sand-900: #1A1717; /* texto em fundo claro */
  --sand-700: #453F3F;
  --sand-500: #8A8480;
  --sand-400: #B9B3AE; /* texto secundário */
  --sand-300: #CFC9C3;
  --sand-200: #E1DBD4;
  --sand-100: #EDE8E1;
  --sand-050: #F5F2ED; /* fundo claro / texto principal */
  --white: #FFFFFF;
  --off-white: #F5F2ED; /* texto principal no escuro */

  /* ── Base palette: crimson (principal + destaque) ─────────────────── */
  --crimson-800: #6A0A14; /* press */
  --crimson-700: #7A0B17;
  --crimson-600: #8B0D1A; /* cor principal */
  --crimson-500: #B51628; /* destaque */
  --crimson-400: #D0243A; /* texto de destaque no escuro */
  --crimson-300: #E46070;
  --crimson-100: #F6D5D9;
  --crimson-050: #FCEBEC;

  /* ── Semantic status (não definidos na paleta — ver readme) ───────── */
  --green-500: #4FBE8B;
  --green-600: #2F9A69;
  --amber-500: #E0A33A;
  --amber-600: #BE8420;
  --red-500: #E5645C;
  --red-600: #C9483F;

  /* ── Semantic aliases: dark theme (default) ───────────────────────── */
  --bg-page: var(--ink-950);
  --bg-raised: var(--ink-900);
  --bg-sunken: #070707;
  --surface-card: var(--ink-900);
  --surface-card-hover: var(--ink-850);
  --surface-inset: var(--ink-800);
  --surface-overlay: rgba(11, 11, 11, 0.72);

  --text-strong: var(--off-white);
  --text-body: #E4DFD9;
  --text-muted: var(--sand-400);
  --text-faint: #8A8480;
  --text-on-brand: var(--white);
  --text-link: var(--crimson-400);
  --text-link-hover: var(--crimson-300);

  --border-subtle: #302B2B;
  --border-default: #3B3535;
  --border-strong: #4C4444;
  --border-brand: rgba(181, 22, 40, 0.55);
  --border-accent: rgba(181, 22, 40, 0.45);

  --brand: var(--crimson-600);
  --brand-hover: var(--crimson-500);
  --brand-press: var(--crimson-800);
  --brand-soft: rgba(139, 13, 26, 0.18);
  --accent: var(--crimson-500);
  --accent-hover: var(--crimson-400);
  --accent-text: var(--crimson-400); /* destaque em texto pequeno */
  --accent-soft: rgba(181, 22, 40, 0.14);

  --status-success: var(--green-500);
  --status-warning: var(--amber-500);
  --status-danger: var(--red-500);
  --status-info: var(--crimson-400);

  --focus-ring: rgba(181, 22, 40, 0.55);

  /* ── Gradientes (só em detalhes) ──────────────────────────────────── */
  --gradient-brand: linear-gradient(135deg, #6A0A14 0%, #8B0D1A 45%, #B51628 100%);
  --gradient-hairline: linear-gradient(90deg, rgba(139,13,26,0) 0%, rgba(139,13,26,.85) 35%, rgba(181,22,40,.85) 65%, rgba(181,22,40,0) 100%);
  --glow-brand: radial-gradient(60% 60% at 50% 0%, rgba(139,13,26,.34) 0%, rgba(139,13,26,0) 70%);
  --glow-accent: radial-gradient(50% 50% at 80% 20%, rgba(181,22,40,.20) 0%, rgba(181,22,40,0) 70%);

  /* ── Grid motif ───────────────────────────────────────────────────── */
  --grid-line: rgba(245, 242, 237, 0.055);
  --grid-line-light: rgba(26, 23, 23, 0.06);
  --grid-size: 48px;
}

/* Light scope — aplique numa seção/tela que roda em fundo claro. */
[data-theme="light"] {
  --bg-page: var(--sand-050);
  --bg-raised: var(--white);
  --bg-sunken: var(--sand-100);
  --surface-card: var(--white);
  --surface-card-hover: var(--sand-050);
  --surface-inset: var(--sand-100);
  --surface-overlay: rgba(26, 23, 23, 0.45);

  --text-strong: var(--sand-900);
  --text-body: #2E2828;
  --text-muted: #6E6763;
  --text-faint: #8A8480;
  --text-link: var(--crimson-600);
  --text-link-hover: var(--crimson-500);

  --border-subtle: rgba(26, 23, 23, 0.08);
  --border-default: var(--sand-200);
  --border-strong: var(--sand-300);
  --border-brand: rgba(139, 13, 26, 0.4);
  --border-accent: rgba(139, 13, 26, 0.35);

  --accent: var(--crimson-600);
  --accent-hover: var(--crimson-700);
  --accent-text: var(--crimson-600);
  --accent-soft: rgba(139, 13, 26, 0.08);
  --brand-soft: rgba(139, 13, 26, 0.07);

  --status-success: var(--green-600);
  --status-warning: var(--amber-600);
  --status-danger: var(--red-600);

  /* O motivo de grid inverte junto com o tema. */
  --grid-line: var(--grid-line-light);
}