/* Tokens do design "Dynamic Clarity" (frontend/…/DESIGN.md), ajustados para contraste AA. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* superfícies */
  --bg: #f6f5fb;
  --surface: #ffffff;
  --surface-2: #efebff;
  --line: #e6e4f0;

  /* texto */
  --text: #16152b;
  --text-2: #6a6977;          /* um tom abaixo do Stitch (#6e6d7a) para passar AA sobre surface-2 */

  /* marca */
  --primary: #5b4cf0;          /* fundo de botões principais */
  --on-primary: #ffffff;
  --primary-text: #4a3be0;     /* violeta usado como texto sobre superfícies */
  --primary-soft: #e8e4ff;
  --coral: #ff7a45;
  --on-coral: #16152b;
  --coral-soft: #fff0eb;
  --coral-text: #a73a05;
  --success: #22c55e;           /* fundo do ✓ concluído */
  --on-success: #0b2915;        /* ✓ sobre o verde (branco não atinge 3:1) */
  --success-text: #166534;
  --success-soft: #dcfce7;
  --danger: #ba1a1a;
  --danger-soft: #ffdad6;

  /* duelo */
  --duel-a: linear-gradient(140deg, #6d5ef5 0%, #4433d9 100%);
  --on-duel-a: #ffffff;
  --duel-b: linear-gradient(140deg, #ff8a5b 0%, #f2683a 100%);
  --on-duel-b: #16152b;

  /* elevação */
  --shadow-1: 0 8px 24px -4px rgb(91 76 240 / 0.06), 0 2px 6px -1px rgb(22 21 43 / 0.04);
  --shadow-2: 0 16px 36px -6px rgb(91 76 240 / 0.16), 0 4px 12px -2px rgb(22 21 43 / 0.06);
  --shadow-cta: 0 10px 25px rgb(91 76 240 / 0.35);
  --bar-bg: rgb(255 255 255 / 0.85);

  /* forma e espaço */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;
  --gutter: 20px;
  --tap: 48px;

  /* tipografia */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-display: 2rem;
  --fs-h1: 1.625rem;
  --fs-h2: 1.25rem;
  --fs-h3: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-label: 0.6875rem;
}

/* Tema escuro: automático pelo sistema, a menos que o usuário force o claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0f0e1a;
    --surface: #181729;
    --surface-2: #221f3a;
    --line: #28263d;
    --text: #f8f7fc;
    --text-2: #a1a0b2;
    --primary-text: #a49bff;
    --primary-soft: #2a2550;
    --coral: #ff8f60;
    --coral-soft: #3a2018;
    --coral-text: #ffb08f;
    --success-text: #4ade80;
    --success-soft: #0f2e1c;
    --danger: #ff8a80;
    --danger-soft: #3d1614;
    --shadow-1: 0 1px 0 rgb(255 255 255 / 0.03);
    --shadow-2: 0 12px 28px rgb(0 0 0 / 0.45);
    --shadow-cta: 0 10px 25px rgb(91 76 240 / 0.3);
    --bar-bg: rgb(15 14 26 / 0.85);
  }
}

/* Tema escuro forçado pelo usuário (mesmos valores). */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0f0e1a;
  --surface: #181729;
  --surface-2: #221f3a;
  --line: #28263d;
  --text: #f8f7fc;
  --text-2: #a1a0b2;
  --primary-text: #a49bff;
  --primary-soft: #2a2550;
  --coral: #ff8f60;
  --coral-soft: #3a2018;
  --coral-text: #ffb08f;
  --success-text: #4ade80;
  --success-soft: #0f2e1c;
  --danger: #ff8a80;
  --danger-soft: #3d1614;
  --shadow-1: 0 1px 0 rgb(255 255 255 / 0.03);
  --shadow-2: 0 12px 28px rgb(0 0 0 / 0.45);
  --shadow-cta: 0 10px 25px rgb(91 76 240 / 0.3);
  --bar-bg: rgb(15 14 26 / 0.85);
}