/* ==========================================================================
   QUERO QUADRAS — Design tokens
   Fonte única de cores, tipografia, espaçamento, raios, sombras e movimento.
   Os componentes (componentes.css) e layouts consomem apenas estes tokens.

   Contraste verificado (WCAG 2.2 AA):
   - text-secondary ≥ 7.2:1 em todas as superfícies
   - text-muted 5.9:1 no bg, 4.85:1 em surface — NÃO usar sobre surface-elevated/hover
   - on-accent sobre accent 13.6:1
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Cores — marca e superfícies */
  --color-bg: #282c34;
  --color-bg-secondary: #21252b;
  --color-surface: #2c313c;
  --color-surface-elevated: #333842;
  --color-surface-hover: #3e4451;


  --color-accent: #B8F34A;
  --color-accent-hover: #C7FF63;
  --color-accent-pressed: #A4DF38;
  --color-accent-soft: rgba(184, 243, 74, 0.12);
  --color-accent-border: rgba(184, 243, 74, 0.35);
  --color-on-accent: #101820;

  --color-text-primary: #FFFFFF;
  --color-text-secondary: #C3CCD5;
  --color-text-muted: #8995A3;

  --color-border: #34424F;
  --color-border-subtle: #293642;

  /* Cores — semânticas */
  --color-success: #4ADE80;
  --color-warning: #FBBF24;
  --color-danger: #F87171;
  --color-disabled: #647180;
  --color-focus: #B8F34A;

  --color-success-soft: rgba(74, 222, 128, 0.12);
  --color-warning-soft: rgba(251, 191, 36, 0.12);
  --color-danger-soft: rgba(248, 113, 113, 0.12);
  --color-info-soft: rgba(52, 152, 219, 0.12);
  --color-success-border: rgba(74, 222, 128, 0.35);
  --color-warning-border: rgba(251, 191, 36, 0.35);
  --color-danger-border: rgba(248, 113, 113, 0.4);
  --color-info-border: rgba(52, 152, 219, 0.35);

  /* Tipografia */
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-display: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  /* Escala fixa de produto (o display, só do destaque das páginas de marketing, continua fluido) */
  --font-size-h1: 1.75rem;
  --font-size-h2: 1.375rem;
  --font-size-h3: 1.125rem;
  --font-size-h4: 1rem;
  --font-size-body-lg: 1.0625rem;
  --font-size-body: 0.9375rem;
  --font-size-small: 0.8125rem;
  --font-size-label: 0.8125rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-tight: 1.15;
  --line-height-heading: 1.25;
  --line-height-body: 1.55;

  /* Espaçamento (múltiplos de 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Raios */
  --radius-sm: 6px;
  --radius-control: 8px;
  /* campos, selects e botões */
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Sombras — apenas para elementos elevados */
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-modal: 0 20px 48px rgba(0, 0, 0, 0.45);

  /* Movimento */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --easing: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Dimensões */
  --control-height: 42px;
  --control-height-sm: 34px;
  --content-max-width: 1440px;
  --header-height: 68px;
  --bottom-nav-height: 64px;
  --sidebar-width: 264px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}

/* --------------------------------------------------------------------------
   Integração com o Bootstrap 5.3 (tema escuro): os componentes nativos
   passam a herdar os tokens acima.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  --bs-body-font-family: var(--font-family);
  --bs-body-font-size: var(--font-size-body);
  --bs-body-line-height: var(--line-height-body);
  --bs-body-bg: var(--color-bg);
  --bs-body-bg-rgb: 16, 24, 32;
  --bs-body-color: var(--color-text-secondary);
  --bs-body-color-rgb: 195, 204, 213;
  --bs-emphasis-color: var(--color-text-primary);
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-heading-color: var(--color-text-primary);
  --bs-secondary-color: var(--color-text-muted);
  --bs-secondary-bg: var(--color-surface);
  --bs-secondary-bg-rgb: 29, 41, 53;
  --bs-tertiary-bg: var(--color-bg-secondary);
  --bs-tertiary-bg-rgb: 21, 31, 41;
  --bs-tertiary-color: var(--color-text-muted);

  --bs-border-color: var(--color-border);
  --bs-border-color-translucent: var(--color-border-subtle);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-full);

  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 184, 243, 74;
  --bs-success: var(--color-success);
  --bs-success-rgb: 74, 222, 128;
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: 251, 191, 36;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 248, 113, 113;

  --bs-link-color: var(--color-accent);
  --bs-link-color-rgb: 184, 243, 74;
  --bs-link-hover-color: var(--color-accent-hover);
  --bs-link-hover-color-rgb: 199, 255, 99;

  --bs-focus-ring-color: rgba(184, 243, 74, 0.45);
  --bs-form-valid-color: var(--color-success);
  --bs-form-valid-border-color: var(--color-success);
  --bs-form-invalid-color: var(--color-danger);
  --bs-form-invalid-border-color: var(--color-danger);
}

/* ==========================================================================
   Temas alternativos de destaque (standby para implementação futura)
   Para ativar, defina o atributo no <html> ou <body>, ex:
   <html data-tema="coral"> ou <body class="tema-coral"> ou <html data-tema="1">
   ========================================================================== */

/* Tema padrão — Verde Limão / Original (#B8F34A) */
:root[data-tema="padrao"],
:root[data-tema="limao"],
[data-tema="padrao"],
[data-tema="limao"],
.tema-padrao,
.tema-limao {
  --color-accent: #B8F34A;
  --color-accent-hover: #C7FF63;
  --color-accent-pressed: #A4DF38;
  --color-accent-soft: rgba(184, 243, 74, 0.12);
  --color-accent-border: rgba(184, 243, 74, 0.35);
  --color-on-accent: #101820;
  --color-focus: #B8F34A;

  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 184, 243, 74;
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-accent-hover);
  --bs-focus-ring-color: rgba(184, 243, 74, 0.45);
}

/* Tema 1 — Coral / Laranja (#f17c58) */
:root[data-tema="1"],
:root[data-tema="coral"],
:root[data-tema="laranja"],
[data-tema="1"],
[data-tema="coral"],
[data-tema="laranja"],
.tema-coral,
.tema-laranja {
  --color-accent: #f17c58;
  --color-accent-hover: #f49475;
  --color-accent-pressed: #e4633d;
  --color-accent-soft: rgba(241, 124, 88, 0.12);
  --color-accent-border: rgba(241, 124, 88, 0.35);
  --color-on-accent: #101820;
  --color-focus: #f17c58;

  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 241, 124, 88;
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-accent-hover);
  --bs-focus-ring-color: rgba(241, 124, 88, 0.45);
}

/* Tema 2 — Âmbar / Ouro (#FBBF24) */
:root[data-tema="2"],
:root[data-tema="ambar"],
:root[data-tema="ouro"],
[data-tema="2"],
[data-tema="ambar"],
[data-tema="ouro"],
.tema-ambar,
.tema-ouro {
  --color-accent: #FBBF24;
  --color-accent-hover: #FCD34D;
  --color-accent-pressed: #F59E0B;
  --color-accent-soft: rgba(251, 191, 36, 0.12);
  --color-accent-border: rgba(251, 191, 36, 0.35);
  --color-on-accent: #101820;
  --color-focus: #FBBF24;

  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 251, 191, 36;
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-accent-hover);
  --bs-focus-ring-color: rgba(251, 191, 36, 0.45);
}

/* Tema 3 — Azul Claro (#0092ce) */
:root[data-tema="3"],
:root[data-tema="azul"],
:root[data-tema="azul-claro"],
[data-tema="3"],
[data-tema="azul"],
[data-tema="azul-claro"],
.tema-azul,
.tema-azul-claro {
  --color-accent: #0092ce;
  --color-accent-hover: #1aa6e4;
  --color-accent-pressed: #007bb0;
  --color-accent-soft: rgba(0, 146, 206, 0.12);
  --color-accent-border: rgba(0, 146, 206, 0.35);
  --color-on-accent: #ffffff;
  --color-focus: #0092ce;

  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 0, 146, 206;
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-accent-hover);
  --bs-focus-ring-color: rgba(0, 146, 206, 0.45);
}

/* Tema 4 — Verde Esmeralda (#4ADE80) */
:root[data-tema="4"],
:root[data-tema="verde"],
:root[data-tema="esmeralda"],
[data-tema="4"],
[data-tema="verde"],
[data-tema="esmeralda"],
.tema-verde,
.tema-esmeralda {
  --color-accent: #4ADE80;
  --color-accent-hover: #66E394;
  --color-accent-pressed: #22C55E;
  --color-accent-soft: rgba(74, 222, 128, 0.12);
  --color-accent-border: rgba(74, 222, 128, 0.35);
  --color-on-accent: #101820;
  --color-focus: #4ADE80;

  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 74, 222, 128;
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-accent-hover);
  --bs-focus-ring-color: rgba(74, 222, 128, 0.45);
}

/* Tema 5 — Rosa / Magenta (#f871e9) */
:root[data-tema="5"],
:root[data-tema="rosa"],
:root[data-tema="magenta"],
[data-tema="5"],
[data-tema="rosa"],
[data-tema="magenta"],
.tema-rosa,
.tema-magenta {
  --color-accent: #f871e9;
  --color-accent-hover: #FA8EEF;
  --color-accent-pressed: #D946EF;
  --color-accent-soft: rgba(248, 113, 233, 0.12);
  --color-accent-border: rgba(248, 113, 233, 0.35);
  --color-on-accent: #101820;
  --color-focus: #f871e9;

  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 248, 113, 233;
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-accent-hover);
  --bs-focus-ring-color: rgba(248, 113, 233, 0.45);
}