/* Nominato DS — Semantic color aliases
   Product code should use THESE, not the raw ramps. Every token is defined for
   both themes. Light is the default (:root); dark is [data-theme="dark"].
   Dark theme is mandatory — never ship a token that only exists in one theme. */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces & background */
  --bg: var(--stone-50);
  --surface: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--stone-100);
  --surface-muted: var(--stone-100);
  --surface-inverse: var(--night-900);
  --overlay: rgba(19, 17, 12, 0.55);

  /* Text */
  --text-strong: var(--stone-900);
  --text: var(--stone-800);
  --text-muted: var(--stone-600);
  --text-subtle: var(--stone-500);
  --text-inverse: var(--white);
  --text-on-brand: var(--white);

  /* Borders & focus */
  --border: var(--stone-200);
  --border-strong: var(--stone-300);
  --divider: var(--stone-200);
  --ring: rgba(62, 81, 146, 0.45);      /* navy-500 @ 45% */

  /* Brand (navy) */
  --brand: var(--navy-600);
  --brand-hover: var(--navy-500);
  --brand-press: var(--navy-800);        /* also the 3D lip on primary buttons */
  --on-brand: var(--white);
  --brand-surface: var(--navy-50);
  --brand-surface-text: var(--navy-700);
  --brand-subtle-border: var(--navy-100);

  /* Success / aprovação (green) */
  --success: var(--green-500);
  --success-strong: var(--green-600);
  --success-surface: var(--green-50);
  --success-border: var(--green-200);
  --success-text: var(--green-700);
  --success-lip: var(--green-700);

  /* Revisar — the non-punishing "wrong answer / needs review" state (coral) */
  --revisar: var(--coral-400);
  --revisar-strong: var(--coral-500);
  --revisar-surface: var(--coral-50);
  --revisar-border: var(--coral-200);
  --revisar-text: var(--coral-700);
  --revisar-lip: var(--coral-600);

  /* Warning (gold) */
  --warning: var(--gold-400);
  --warning-strong: var(--gold-500);
  --warning-surface: var(--gold-50);
  --warning-border: var(--gold-200);
  --warning-text: var(--gold-700);

  /* Info (navy tint) */
  --info: var(--navy-500);
  --info-surface: var(--navy-50);
  --info-border: var(--navy-100);
  --info-text: var(--navy-700);

  /* Lilac — decorative accent (rotação de superfícies pastel). No state meaning. */
  --lilac: var(--lilac-500);
  --lilac-surface: var(--lilac-50);
  --lilac-border: var(--lilac-100);
  --lilac-text: var(--lilac-700);

  /* Danger — destructive actions ONLY (delete, cancel subscription). Never "erro". */
  --danger: var(--red-500);
  --danger-strong: var(--red-600);
  --danger-surface: var(--red-50);
  --danger-text: var(--red-600);

  /* Gamification accents */
  --xp: var(--gold-400);
  --xp-text: var(--gold-700);
  --streak: var(--coral-400);            /* the streak flame */
  --streak-hot: var(--gold-400);
  --league: var(--gold-500);             /* podium / liga */
  --gem: var(--green-500);

  /* Neutral interactive lip (secondary/neutral 3D buttons) */
  --lip-neutral: var(--stone-300);

  /* Diário Oficial parchment motif */
  --parchment: #F6ECD6;
  --parchment-ink: var(--stone-800);
  --parchment-seal: var(--green-700);

  /* Iconography — hand-drawn object icons (nav + gamification) always render in
     full, fixed color like Nomi's art, independent of theme. --icon-ink is the
     one warm-brown outline used on every object icon (never pure black). */
  --icon-ink: #47301C;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces & background */
  --bg: var(--night-950);
  --surface: var(--night-850);
  --surface-raised: var(--night-800);
  --surface-sunken: var(--night-900);
  --surface-muted: var(--night-800);
  --surface-inverse: var(--stone-100);
  --overlay: rgba(0, 0, 0, 0.7);

  /* Text — warm off-white, comfortable at night */
  --text-strong: #F6F3EC;
  --text: #E7E3D9;
  --text-muted: #ABA697;
  --text-subtle: #837E71;
  --text-inverse: var(--night-950);
  --text-on-brand: var(--white);

  /* Borders & focus */
  --border: var(--night-700);
  --border-strong: var(--night-600);
  --divider: var(--night-750);
  --ring: rgba(131, 147, 199, 0.55);     /* navy-300 @ 55% */

  /* Brand (navy) — lifted so it pops on the dark ground */
  --brand: var(--navy-400);
  --brand-hover: var(--navy-300);
  --brand-press: var(--navy-600);
  --on-brand: var(--white);
  --brand-surface: #1E2740;
  --brand-surface-text: var(--navy-200);
  --brand-subtle-border: #2B3656;

  /* Success */
  --success: var(--green-400);
  --success-strong: var(--green-300);
  --success-surface: #102619;
  --success-border: #1D4A2E;
  --success-text: var(--green-300);
  --success-lip: var(--green-700);

  /* Revisar (coral) */
  --revisar: var(--coral-400);
  --revisar-strong: var(--coral-300);
  --revisar-surface: #2E1A12;
  --revisar-border: #4A2A1B;
  --revisar-text: var(--coral-200);
  --revisar-lip: var(--coral-600);

  /* Warning (gold) */
  --warning: var(--gold-400);
  --warning-strong: var(--gold-300);
  --warning-surface: #2A2110;
  --warning-border: #47380F;
  --warning-text: var(--gold-200);

  /* Info */
  --info: var(--navy-300);
  --info-surface: #1B2233;
  --info-border: #2B3656;
  --info-text: var(--navy-200);

  /* Lilac */
  --lilac: var(--lilac-300);
  --lilac-surface: #251F3A;
  --lilac-border: #3A3158;
  --lilac-text: var(--lilac-200);

  /* Danger */
  --danger: var(--red-400);
  --danger-strong: var(--red-500);
  --danger-surface: #2E1613;
  --danger-text: #F0A79E;

  /* Gamification accents */
  --xp: var(--gold-400);
  --xp-text: var(--gold-300);
  --streak: var(--coral-400);
  --streak-hot: var(--gold-400);
  --league: var(--gold-400);
  --gem: var(--green-400);

  /* Neutral interactive lip */
  --lip-neutral: var(--night-950);

  /* Diário Oficial parchment motif (dimmed for dark) */
  --parchment: #E7D7B0;
  --parchment-ink: #2A2418;
  --parchment-seal: var(--green-700);

  /* Iconography — identical to light. Object icons don't reskin per theme. */
  --icon-ink: #47301C;
}

/* Nav bar glass (NavBar component) — pílula transparente sobre o conteúdo */
:root,
[data-theme="light"] {
  --nav-glass-border: rgba(35, 30, 20, 0.16);
  --nav-glass-active: rgba(35, 30, 20, 0.09);
  --nav-glass-shadow: rgba(35, 30, 20, 0.22);
}

[data-theme="dark"] {
  --nav-glass-border: rgba(255, 255, 255, 0.14);
  --nav-glass-active: rgba(255, 255, 255, 0.13);
  --nav-glass-shadow: rgba(0, 0, 0, 0.55);
}