/*
 * Mendes Hub: tokens do Design System.
 *
 * Tema escuro (padrão): todo valor abaixo foi extraído do design v30 (design-source/).
 * A origem (arquivo:linha) de cada um está em "Design System.md" e em
 * docs/design/extracted-tokens.json. O teste test_tokens_match_design_source
 * reprova qualquer valor do bloco escuro que não exista no design.
 * Única exceção aprovada: --color-text-dim e --color-placeholder = #7E8882
 * (Matheus escolheu #7E8882 em 2026-10-15 para legibilidade AA; no design: #6F7973 / #6E7872).
 *
 * Tema claro: APROVADA por Matheus em 2026-10-15. Derivado do escuro:
 * mesmo verde de destaque, mesmos componentes, só as cores (e a opacidade das sombras) trocam.
 */

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

  /* Fundos e superfícies */
  --color-bg: #050605;
  --color-bg-header: rgba(5,6,5,0.78);
  --color-surface: #0A0C0B;
  --color-surface-top: #131614;
  --color-surface-bottom: #0C0E0D;
  --color-surface-2: #151816;
  --color-surface-3: #1C211E;
  --color-track: #232825;
  --color-lang-bg: rgba(14,17,15,.92);

  /* Bordas e divisórias */
  --color-border: #212622;
  --color-border-strong: #2A302C;
  --color-divider: #1A1E1B;

  /* Texto */
  --color-text: #EEF3F0;
  --color-text-strong: #FFFFFF;
  --color-text-soft: #C9D2CD;
  --color-text-muted: #98A39D;
  --color-text-dim: #7E8882;     /* design #6F7973, troca aprovada em 2026-10-15 */
  --color-placeholder: #7E8882;  /* design #6E7872, troca aprovada em 2026-10-15 */

  /* Destaque (verde) e secundárias */
  --color-accent: #4FD18B;
  --color-accent-text: #4FD18B;
  --color-accent-soft-text: #7FE0B0;
  --color-accent-teal: #2FBF9B;
  --color-accent-lime: #A3D94F;
  --color-on-accent: #07110C;
  --color-accent-tint: rgba(79,209,139,0.12);
  --color-accent-tint-weak: rgba(79,209,139,0.1);
  --color-accent-tint-row: rgba(79,209,139,0.05);
  --color-accent-tint-lang: rgba(79,209,139,.14);
  --color-accent-ring: rgba(79,209,139,0.25);
  --color-accent-ring-strong: rgba(79,209,139,0.3);
  --color-accent-hover-border: rgba(79,209,139,.4);
  --color-accent-border: rgba(79,209,139,0.35);  /* card do formulário "New client" (Clients.dc.html:66) */
  --color-focus-ring: rgba(79,209,139,0.22);
  --color-stat-bg: rgba(0,0,0,0.35);            /* números da faixa de Clients (Clients.dc.html:59) */

  /* Estados */
  --color-danger: #F26D6D;
  --color-danger-text: #F58A8A;
  --color-danger-tint: rgba(242,109,109,0.12);
  --color-danger-ring: rgba(242,109,109,0.35);
  --color-warning: #E8B04A;
  --color-warning-text: #E8B04A;
  --color-warning-tint: rgba(232,176,74,0.12);
  --color-warning-tint-weak: rgba(232,176,74,0.1);
  --color-warning-ring: rgba(232,176,74,0.28);
  --color-alert: #F5A25D;
  --color-info-text: #8FD3F4;
  --color-info-tint: rgba(143,211,244,0.12);
  --color-info-ring: rgba(143,211,244,0.35);

  /* Avatares: pares do degradê das iniciais (Main.dc.html, lista de projetos). Iguais nos dois temas. */
  --color-avatar-1-from: #A3D94F;
  --color-avatar-1-to: #4FD18B;
  --color-avatar-2-from: #4FD18B;
  --color-avatar-2-to: #2FBF9B;
  --color-avatar-3-from: #7FE0B0;
  --color-avatar-3-to: #2FBF9B;
  --color-avatar-4-from: #4FD18B;
  --color-avatar-4-to: #A3D94F;
  --color-avatar-5-from: #2FBF9B;
  --color-avatar-5-to: #7FE0B0;
  --color-avatar-6-from: #A3D94F;
  --color-avatar-6-to: #7FE0B0;
  --color-avatar-7-from: #4FD18B;
  --color-avatar-7-to: #7FE0B0;

  /* Gradientes */
  --gradient-page: linear-gradient(rgba(255,255,255,0.024) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgba(255,255,255,0.024) 1px, transparent 1px) 0 0 / 44px 44px, radial-gradient(900px 460px at 8% -6%, rgba(79,209,139,0.11), transparent 62%), radial-gradient(800px 420px at 100% 4%, rgba(47,191,155,0.07), transparent 58%), #050605;
  --gradient-card: linear-gradient(180deg, #131614 0%, #0C0E0D 100%);
  --gradient-card-edge: linear-gradient(90deg,transparent,rgba(79,209,139,.65),transparent);
  --gradient-hero: linear-gradient(115deg, rgba(79,209,139,0.20) 0%, rgba(47,191,155,0.06) 38%, rgba(255,255,255,0.015) 70%), #0A0C0B;
  --gradient-nav-active: linear-gradient(180deg, #1C211E, #131614);
  --gradient-logo: linear-gradient(145deg, #1D221F, #0D100E);
  --gradient-title: linear-gradient(100deg,#FFFFFF 25%,#7FE0B0 90%);

  /* Sombras */
  --shadow-card: inset 0 1px 0 rgba(255,255,255,0.045), 0 14px 34px -14px rgba(0,0,0,0.7), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-card-hover: 0 20px 44px -16px rgba(0,0,0,.85),0 0 0 1px rgba(79,209,139,.12);
  --shadow-hero: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 60px -24px rgba(0,0,0,0.85);
  --shadow-header: 0 10px 30px -18px rgba(0,0,0,0.8);
  --shadow-logo: 0 6px 14px -4px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.07);
  --shadow-nav-active: inset 0 0 0 1px #2A302C, 0 4px 10px -2px rgba(0,0,0,0.5);
  --shadow-lang: 0 10px 24px -10px rgba(0,0,0,.8);
  --shadow-input: inset 0 1px 3px rgba(0,0,0,0.6);
  --shadow-focus: 0 0 0 4px rgba(79,209,139,0.22);
  --shadow-button-primary: inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 24px -8px #4FD18B;
  --shadow-button-primary-lg: inset 0 1px 0 rgba(255,255,255,0.4), 0 12px 26px -10px #4FD18B;
  --shadow-button-secondary: inset 0 0 0 1px #2A302C;
  --shadow-badge-solid: 0 6px 14px -6px #4FD18B;
  --shadow-glow: 0 0 12px #4FD18B;
  --shadow-glow-bar: 0 0 10px #4FD18B;
  --shadow-track: inset 0 1px 2px rgba(0,0,0,0.5);
  --shadow-avatar-inset: inset 0 1px 0 rgba(255,255,255,0.35);
  --shadow-avatar-lg-inset: inset 0 1px 0 rgba(255,255,255,0.4);   /* Client.dc.html:47 */
  --shadow-card-highlight: inset 0 1px 0 rgba(255,255,255,0.045), 0 18px 44px -16px rgba(79,209,139,0.3);  /* Clients.dc.html:66 */
  --shadow-chip-active: 0 8px 20px -8px var(--color-accent);       /* chip selecionado (script de Clients.dc.html) */
  --shadow-stat: inset 0 0 0 1px #212622;                           /* Clients.dc.html:59 */
  --shadow-section-number: inset 0 0 0 1px rgba(79,209,139,0.32);   /* número da seção do formulário (NewProject.dc.html:70) */

  /* Raios */
  --radius-flag: 3px;
  --radius-check: 7px;
  --radius-nav: 8px;
  --radius-icon: 9px;
  --radius-control: 10px;
  --radius-avatar: 11px;
  --radius-button-lg: 12px;
  --radius-tile: 14px;        /* números da faixa de Clients (Clients.dc.html:59) */
  --radius-card: 16px;
  --radius-avatar-lg: 20px;   /* avatar da ficha do cliente (Client.dc.html:47) */
  --radius-hero: 22px;
  --radius-pill: 999px;

  /* Fontes */
  --font-sans: 'Manrope', system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque','Manrope',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ------------------------------------------------------------------------
 * Tema claro: APROVADA por Matheus em 2026-10-15.
 * O design não tem paleta clara. Valores derivados; contraste em Design System.md.
 * ---------------------------------------------------------------------- */
[data-theme="light"] {
  color-scheme: light;

  --color-bg: #F3F6F4;
  --color-bg-header: rgba(243,246,244,0.85);
  --color-surface: #FFFFFF;
  --color-surface-top: #FFFFFF;
  --color-surface-bottom: #F7FAF8;
  --color-surface-2: #EDF1EE;
  --color-surface-3: #E6ECE8;
  --color-track: #DCE3DF;
  --color-lang-bg: rgba(255,255,255,.92);

  --color-border: #DCE3DF;
  --color-border-strong: #C9D2CD;
  --color-divider: #E4E9E6;

  --color-text: #0E1511;
  --color-text-strong: #000000;
  --color-text-soft: #2E3732;
  --color-text-muted: #545F59;
  --color-text-dim: #5F6A64;
  --color-placeholder: #5F6A64;

  --color-accent: #4FD18B;
  --color-accent-text: #11703F;
  --color-accent-soft-text: #11703F;
  --color-accent-teal: #2FBF9B;
  --color-accent-lime: #A3D94F;
  --color-on-accent: #07110C;
  --color-accent-tint: rgba(79,209,139,0.16);
  --color-accent-tint-weak: rgba(79,209,139,0.14);
  --color-accent-tint-row: rgba(79,209,139,0.07);
  --color-accent-tint-lang: rgba(79,209,139,.18);
  --color-accent-ring: rgba(17,112,63,0.28);
  --color-accent-ring-strong: rgba(17,112,63,0.32);
  --color-accent-hover-border: rgba(17,112,63,.4);
  --color-accent-border: rgba(17,112,63,0.35);
  --color-focus-ring: rgba(79,209,139,0.35);
  --color-stat-bg: rgba(255,255,255,0.7);

  --color-danger: #D93C3C;
  --color-danger-text: #B42318;
  --color-danger-tint: rgba(217,60,60,0.10);
  --color-danger-ring: rgba(180,35,24,0.30);
  --color-warning: #C98A12;
  --color-warning-text: #8A5300;
  --color-warning-tint: rgba(201,138,18,0.12);
  --color-warning-tint-weak: rgba(201,138,18,0.1);
  --color-warning-ring: rgba(138,83,0,0.28);
  --color-alert: #C2410C;
  --color-info-text: #075985;
  --color-info-tint: rgba(7,89,133,0.10);
  --color-info-ring: rgba(7,89,133,0.28);

  --gradient-page: linear-gradient(rgba(14,21,17,0.035) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgba(14,21,17,0.035) 1px, transparent 1px) 0 0 / 44px 44px, radial-gradient(900px 460px at 8% -6%, rgba(79,209,139,0.16), transparent 62%), radial-gradient(800px 420px at 100% 4%, rgba(47,191,155,0.10), transparent 58%), #F3F6F4;
  --gradient-card: linear-gradient(180deg, #FFFFFF 0%, #F7FAF8 100%);
  --gradient-card-edge: linear-gradient(90deg,transparent,rgba(79,209,139,.8),transparent);
  --gradient-hero: linear-gradient(115deg, rgba(79,209,139,0.24) 0%, rgba(47,191,155,0.08) 38%, rgba(255,255,255,0.4) 70%), #FFFFFF;
  --gradient-nav-active: linear-gradient(180deg, #FFFFFF, #EDF1EE);
  --gradient-logo: linear-gradient(145deg, #FFFFFF, #E6ECE8);
  --gradient-title: linear-gradient(100deg,#0E1511 25%,#11703F 90%);

  --shadow-card: inset 0 1px 0 rgba(255,255,255,0.8), 0 14px 34px -14px rgba(16,24,20,0.18), 0 2px 6px rgba(16,24,20,0.06);
  --shadow-card-hover: 0 20px 44px -16px rgba(16,24,20,.25),0 0 0 1px rgba(17,112,63,.18);
  --shadow-hero: inset 0 1px 0 rgba(255,255,255,0.8), 0 24px 60px -24px rgba(16,24,20,0.22);
  --shadow-header: 0 10px 30px -18px rgba(16,24,20,0.25);
  --shadow-logo: 0 6px 14px -4px rgba(16,24,20,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
  --shadow-nav-active: inset 0 0 0 1px #C9D2CD, 0 4px 10px -2px rgba(16,24,20,0.12);
  --shadow-lang: 0 10px 24px -10px rgba(16,24,20,.25);
  --shadow-input: inset 0 1px 3px rgba(16,24,20,0.08);
  --shadow-focus: 0 0 0 4px rgba(79,209,139,0.35);
  --shadow-button-primary: inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 24px -8px rgba(79,209,139,0.7);
  --shadow-button-primary-lg: inset 0 1px 0 rgba(255,255,255,0.4), 0 12px 26px -10px rgba(79,209,139,0.7);
  --shadow-button-secondary: inset 0 0 0 1px #C9D2CD;
  --shadow-badge-solid: 0 6px 14px -6px rgba(79,209,139,0.7);
  --shadow-glow: 0 0 12px rgba(79,209,139,0.6);
  --shadow-glow-bar: 0 0 10px rgba(79,209,139,0.5);
  --shadow-track: inset 0 1px 2px rgba(16,24,20,0.12);
  --shadow-avatar-inset: inset 0 1px 0 rgba(255,255,255,0.35);
  --shadow-card-highlight: inset 0 1px 0 rgba(255,255,255,0.8), 0 18px 44px -16px rgba(79,209,139,0.35);
  --shadow-chip-active: 0 8px 20px -8px rgba(79,209,139,0.7);
  --shadow-stat: inset 0 0 0 1px #DCE3DF;
  --shadow-section-number: inset 0 0 0 1px rgba(17,112,63,0.32);
}