/* ==========================================================================
   WS GLASS — Tokens do design system do Ecossistema WS Trainer
   Fonte única: design-system/ws-glass. As cópias em cada domínio são geradas por
   tools/sync-design-system.php — não editar as cópias.

   Temas: claro (padrão do :root), escuro via preferência do sistema (tema automático)
   ou forçado com <html data-theme="dark|light">.
   Escala de interface: <html data-scale="85|90|100|110|125|140">. Todo o sistema usa rem,
   então a escala altera tipografia, espaçamentos e alvos de toque de forma proporcional.
   ========================================================================== */

:root {
  /* Marca */
  --ws-green: #00ff00;                 /* verde de destaque exclusivo */
  --ws-on-green: #000000;              /* texto/ícone sobre o verde */

  /* Tipografia — fontes do sistema: sem dependência externa e com aparência nativa em cada plataforma */
  --ws-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --ws-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --ws-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Tamanho do texto (preferência, independente da escala da interface): <html data-text="90|112|125|140"> */
  --ws-text-factor: 1;
  --ws-text-xs: calc(0.75rem * var(--ws-text-factor));
  --ws-text-sm: calc(0.875rem * var(--ws-text-factor));
  --ws-text-md: calc(1rem * var(--ws-text-factor));
  --ws-text-lg: calc(1.125rem * var(--ws-text-factor));
  --ws-text-xl: calc(1.375rem * var(--ws-text-factor));
  --ws-text-2xl: calc(1.75rem * var(--ws-text-factor));
  --ws-text-3xl: calc(clamp(1.875rem, 1.35rem + 2.2vw, 3rem) * var(--ws-text-factor));
  --ws-text-display: calc(clamp(2.25rem, 1.4rem + 4vw, 4.75rem) * var(--ws-text-factor));

  --ws-leading-tight: 1.12;
  --ws-leading-snug: 1.3;
  --ws-leading-normal: 1.55;

  --ws-weight-regular: 400;
  --ws-weight-medium: 500;
  --ws-weight-semibold: 600;
  --ws-weight-bold: 700;

  /* Espaçamento (base 4 px). Densidade (preferência): <html data-density="compacta|confortavel">.
     Os alvos de toque (--ws-touch) não mudam com a densidade: acessibilidade em primeiro lugar. */
  --ws-density: 1;
  --ws-space-1: calc(0.25rem * var(--ws-density));
  --ws-space-2: calc(0.5rem * var(--ws-density));
  --ws-space-3: calc(0.75rem * var(--ws-density));
  --ws-space-4: calc(1rem * var(--ws-density));
  --ws-space-5: calc(1.25rem * var(--ws-density));
  --ws-space-6: calc(1.5rem * var(--ws-density));
  --ws-space-8: calc(2rem * var(--ws-density));
  --ws-space-10: calc(2.5rem * var(--ws-density));
  --ws-space-12: calc(3rem * var(--ws-density));
  --ws-space-16: calc(4rem * var(--ws-density));
  --ws-space-20: calc(5rem * var(--ws-density));
  --ws-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --ws-gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);

  /* Raios */
  --ws-radius-xs: 0.375rem;
  --ws-radius-sm: 0.625rem;
  --ws-radius-md: 0.875rem;
  --ws-radius-lg: 1.25rem;
  --ws-radius-xl: 1.75rem;
  --ws-radius-pill: 999px;

  /* Layout */
  --ws-container: 75rem;       /* 1200 px */
  --ws-container-wide: 100rem; /* 1600 px — painéis e telas ultrawide */
  --ws-container-text: 42rem;  /* largura confortável de leitura */
  --ws-touch: 2.75rem;         /* alvo de toque mínimo: 44 px */
  --ws-header-h: 4rem;
  --ws-tabbar-h: 4.25rem;

  /* Movimento */
  --ws-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ws-dur-fast: 120ms;
  --ws-dur: 200ms;
  --ws-dur-slow: 320ms;

  /* Glass */
  --ws-blur: 20px;
  --ws-saturate: 160%;

  /* Camadas */
  --ws-z-header: 40;
  --ws-z-tabbar: 40;
  --ws-z-overlay: 80;
  --ws-z-modal: 90;
  --ws-z-toast: 100;

  /* ---------- Tema claro (padrão) ---------- */
  color-scheme: light;
  --ws-bg: #f2f2f4;
  --ws-bg-gradient: radial-gradient(120% 80% at 100% 0%, #e6e8e6 0%, transparent 60%);
  --ws-surface: rgba(255, 255, 255, 0.72);
  --ws-surface-solid: #ffffff;
  --ws-surface-2: #f6f6f7;
  --ws-surface-3: #ebebee;
  --ws-surface-inverse: #0b0b0c;
  --ws-border: rgba(0, 0, 0, 0.09);
  --ws-border-strong: rgba(0, 0, 0, 0.18);
  --ws-text: #0b0b0c;
  --ws-text-2: #46464b;   /* 9.4:1 sobre branco */
  --ws-text-3: #6b6b72;   /* 5.3:1 sobre branco, 4.7:1 sobre o fundo */
  --ws-text-inverse: #f5f5f7;
  --ws-accent: var(--ws-green);
  --ws-accent-ink: #007a00;   /* verde legível como texto/ícone no tema claro (5.5:1 sobre branco) */
  --ws-accent-soft: rgba(0, 160, 0, 0.1);
  --ws-accent-border: rgba(0, 0, 0, 0.16);
  --ws-focus: #007a00;
  --ws-success: #007a00;
  --ws-success-soft: rgba(0, 160, 0, 0.1);
  --ws-warning: #8a5300;
  --ws-warning-soft: rgba(255, 170, 0, 0.16);
  --ws-danger: #c4170f;
  --ws-danger-soft: rgba(230, 40, 30, 0.1);
  --ws-info: #005fcc;
  --ws-info-soft: rgba(0, 110, 230, 0.1);
  --ws-overlay: rgba(10, 10, 12, 0.38);
  --ws-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  --ws-shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.05);
  --ws-shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.06);
  --ws-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  /* Gráficos (categórico, ordem fixa). Validado: faixa de luminosidade, croma, daltonismo e contraste por tema. */
  --ws-chart-1: #007a00;
  --ws-chart-2: #005fcc;
  --ws-chart-grid: rgba(0, 0, 0, 0.08);
}

/* ---------- Tema escuro: automático (sistema) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ws-bg: #050505;
    --ws-bg-gradient: radial-gradient(120% 80% at 100% 0%, #10160f 0%, transparent 55%);
    --ws-surface: rgba(28, 28, 30, 0.66);
    --ws-surface-solid: #161618;
    --ws-surface-2: #1d1d20;
    --ws-surface-3: #2a2a2e;
    --ws-surface-inverse: #f5f5f7;
    --ws-border: rgba(255, 255, 255, 0.09);
    --ws-border-strong: rgba(255, 255, 255, 0.18);
    --ws-text: #f5f5f7;
    --ws-text-2: #b4b4ba;   /* 9.9:1 sobre #050505 */
    --ws-text-3: #8e8e95;   /* 6.3:1 sobre #050505, 5.2:1 sobre superfícies */
    --ws-text-inverse: #0b0b0c;
    --ws-accent-ink: #00ff00;
    --ws-accent-soft: rgba(0, 255, 0, 0.1);
    --ws-accent-border: rgba(0, 255, 0, 0.35);
    --ws-focus: #00ff00;
    --ws-success: #00e600;
    --ws-success-soft: rgba(0, 255, 0, 0.1);
    --ws-warning: #ffb340;
    --ws-warning-soft: rgba(255, 179, 64, 0.14);
    --ws-danger: #ff5a4f;
    --ws-danger-soft: rgba(255, 90, 79, 0.14);
    --ws-info: #5aa9ff;
    --ws-info-soft: rgba(90, 169, 255, 0.14);
    --ws-overlay: rgba(0, 0, 0, 0.6);
    --ws-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --ws-shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
    --ws-shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.85);
    --ws-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --ws-chart-1: #00a300;
    --ws-chart-2: #3d7fd6;
    --ws-chart-grid: rgba(255, 255, 255, 0.08);
  }
}

/* ---------- Tema escuro: forçado ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ws-bg: #050505;
  --ws-bg-gradient: radial-gradient(120% 80% at 100% 0%, #10160f 0%, transparent 55%);
  --ws-surface: rgba(28, 28, 30, 0.66);
  --ws-surface-solid: #161618;
  --ws-surface-2: #1d1d20;
  --ws-surface-3: #2a2a2e;
  --ws-surface-inverse: #f5f5f7;
  --ws-border: rgba(255, 255, 255, 0.09);
  --ws-border-strong: rgba(255, 255, 255, 0.18);
  --ws-text: #f5f5f7;
  --ws-text-2: #b4b4ba;
  --ws-text-3: #8e8e95;
  --ws-text-inverse: #0b0b0c;
  --ws-accent-ink: #00ff00;
  --ws-accent-soft: rgba(0, 255, 0, 0.1);
  --ws-accent-border: rgba(0, 255, 0, 0.35);
  --ws-focus: #00ff00;
  --ws-success: #00e600;
  --ws-success-soft: rgba(0, 255, 0, 0.1);
  --ws-warning: #ffb340;
  --ws-warning-soft: rgba(255, 179, 64, 0.14);
  --ws-danger: #ff5a4f;
  --ws-danger-soft: rgba(255, 90, 79, 0.14);
  --ws-info: #5aa9ff;
  --ws-info-soft: rgba(90, 169, 255, 0.14);
  --ws-overlay: rgba(0, 0, 0, 0.6);
  --ws-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --ws-shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
  --ws-shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.85);
  --ws-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --ws-chart-1: #00a300;
  --ws-chart-2: #3d7fd6;
  --ws-chart-grid: rgba(255, 255, 255, 0.08);
}

/* ---------- Escala de interface ---------- */
html { font-size: 100%; }
html[data-scale="85"]  { font-size: 85%; }
html[data-scale="90"]  { font-size: 90%; }
html[data-scale="110"] { font-size: 110%; }
html[data-scale="125"] { font-size: 125%; }
html[data-scale="140"] { font-size: 140%; }

/* ---------- Tamanho do texto e densidade (WS Central V3.0 — Aparência e Personalização) ---------- */
html[data-text="90"]  { --ws-text-factor: 0.9; }
html[data-text="112"] { --ws-text-factor: 1.12; }
html[data-text="125"] { --ws-text-factor: 1.25; }
html[data-text="140"] { --ws-text-factor: 1.4; }
html[data-density="compacta"]    { --ws-density: 0.78; }
html[data-density="confortavel"] { --ws-density: 1.22; }

/* Efeitos reduzidos: sem desfoque nem sombras grandes (aparelhos modestos, economia de bateria). */
html[data-effects="reduzidos"] { --ws-blur: 0px; --ws-saturate: 100%; --ws-shadow-lg: var(--ws-shadow-md); }

/* Paleta de alto contraste: textos secundários e bordas mais fortes, mesma identidade verde. */
:root[data-palette="contraste"] {
  --ws-text-2: #1f1f23; --ws-text-3: #36363c; --ws-border: rgba(0, 0, 0, 0.22); --ws-border-strong: rgba(0, 0, 0, 0.42);
  --ws-surface: rgba(255, 255, 255, 0.94);
}
:root[data-theme="dark"][data-palette="contraste"] {
  --ws-text-2: #e6e6ea; --ws-text-3: #c8c8ce; --ws-border: rgba(255, 255, 255, 0.24); --ws-border-strong: rgba(255, 255, 255, 0.45);
  --ws-surface: rgba(22, 22, 24, 0.94);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-palette="contraste"] {
    --ws-text-2: #e6e6ea; --ws-text-3: #c8c8ce; --ws-border: rgba(255, 255, 255, 0.24); --ws-border-strong: rgba(255, 255, 255, 0.45);
    --ws-surface: rgba(22, 22, 24, 0.94);
  }
}

/* ---------- Preferências de acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --ws-dur-fast: 0ms; --ws-dur: 0ms; --ws-dur-slow: 0ms; }
}
html[data-motion="reduced"] { --ws-dur-fast: 0ms; --ws-dur: 0ms; --ws-dur-slow: 0ms; }

@media (prefers-reduced-transparency: reduce) {
  :root { --ws-blur: 0px; }
}