/* ==========================================================================
   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;

  --ws-text-xs: 0.75rem;
  --ws-text-sm: 0.875rem;
  --ws-text-md: 1rem;
  --ws-text-lg: 1.125rem;
  --ws-text-xl: 1.375rem;
  --ws-text-2xl: 1.75rem;
  --ws-text-3xl: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
  --ws-text-display: clamp(2.25rem, 1.4rem + 4vw, 4.75rem);

  --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) */
  --ws-space-1: 0.25rem;
  --ws-space-2: 0.5rem;
  --ws-space-3: 0.75rem;
  --ws-space-4: 1rem;
  --ws-space-5: 1.25rem;
  --ws-space-6: 1.5rem;
  --ws-space-8: 2rem;
  --ws-space-10: 2.5rem;
  --ws-space-12: 3rem;
  --ws-space-16: 4rem;
  --ws-space-20: 5rem;
  --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);
}

/* ---------- 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);
  }
}

/* ---------- 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);
}

/* ---------- 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%; }

/* ---------- 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; }
}