/* ==========================================================================
   WS DESIGN SYSTEM 2027 — Tokens · versão 2027.1.0
   Sucessor do WS Glass. Mantém TODOS os nomes --ws-* do WS Glass, então o CSS
   existente do site e da loja continua funcionando ao trocar este arquivo.

   Regras da marca aplicadas aqui:
   - Verde WS sempre #00FF00, sem variações de tom.
   - Tema claro: o verde nunca é usado como cor de texto (contraste 1,4:1 sobre
     branco). Vira preenchimento com texto preto, sublinhado ou marcador.
   - Texto sobre o verde: sempre preto (15,3:1).

   Temas: claro no :root; escuro automático (preferência do sistema) ou forçado
   com <html data-theme="dark|light">. Os painéis usam data-theme="dark" por padrão.
   ========================================================================== */

:root {
  /* Marca */
  --ws-green: #00ff00;
  --ws-on-green: #000000;
  --ws-black: #000000;

  /* Tipografia — Inter e Inter Tight auto-hospedadas (css/fonts.css), com fontes do sistema como reserva */
  --ws-font-sans: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ws-font-display: "Inter Tight Variable", "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ws-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --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-tracking-display: -0.02em;
  --ws-weight-regular: 400;
  --ws-weight-medium: 500;
  --ws-weight-semibold: 600;
  --ws-weight-bold: 700;

  /* Espaçamento — base 4 px */
  --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 — mais contidos que no WS Glass */
  --ws-radius-xs: 0.25rem;  /* 4 px  — chips pequenos */
  --ws-radius-sm: 0.5rem;   /* 8 px  — botões, campos */
  --ws-radius-md: 0.75rem;  /* 12 px — cards */
  --ws-radius-lg: 1rem;     /* 16 px — modais, folhas */
  --ws-radius-xl: 1.5rem;
  --ws-radius-pill: 999px;

  /* Layout */
  --ws-container: 75rem;
  --ws-container-wide: 100rem;
  --ws-container-text: 42rem;
  --ws-touch: 2.75rem;          /* 44 px */
  --ws-header-h: 4rem;
  --ws-tabbar-h: 4.25rem;
  --ws-sidebar-w: 16rem;
  --ws-sidebar-w-collapsed: 4.5rem;
  --ws-control-h: 2.25rem;      /* 36 px — controles de painel no desktop */

  /* Movimento — só opacidade e posição */
  --ws-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ws-dur-fast: 120ms;
  --ws-dur: 180ms;
  --ws-dur-slow: 260ms;

  /* Vidro: só no cabeçalho do site público. Painéis usam superfícies sólidas. */
  --ws-blur: 12px;
  --ws-saturate: 140%;

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

  /* ---------- Tema claro (padrão do site e da loja públicos) ---------- */
  color-scheme: light;
  --ws-bg: #fafaf9;
  --ws-bg-gradient: none;
  --ws-surface: rgba(255, 255, 255, 0.88);
  --ws-surface-solid: #ffffff;
  --ws-surface-2: #f2f3f1;
  --ws-surface-3: #e8eae6;
  --ws-surface-inverse: #0b0c0b;
  --ws-border: #e3e5e1;
  --ws-border-strong: #cdd1cb;
  --ws-text: #0b0c0b;
  --ws-text-2: #3f453f;   /* 9,8:1 sobre branco */
  --ws-text-3: #5b615b;   /* 6,4:1 sobre branco */
  --ws-text-inverse: #edefec;

  --ws-accent: var(--ws-green);
  --ws-accent-ink: #0b0c0b;               /* claro: nada de verde como texto */
  --ws-accent-soft: rgba(0, 255, 0, 0.16);
  --ws-accent-border: rgba(0, 0, 0, 0.22); /* keyline preto em volta do verde */
  --ws-accent-underline: var(--ws-green);
  --ws-focus: #0b0c0b;
  --ws-focus-halo: rgba(0, 255, 0, 0.55);

  --ws-success: #0b0c0b;                  /* sucesso = texto escuro + fundo verde suave + ícone */
  --ws-success-soft: rgba(0, 255, 0, 0.16);
  --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, 11, 10, 0.4);

  --ws-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ws-shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.05);
  --ws-shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.24), 0 4px 12px rgba(0, 0, 0, 0.06);
  --ws-highlight: none;

  --ws-chart-1: #0b0c0b;
  --ws-chart-2: #005fcc;
  --ws-chart-grid: rgba(0, 0, 0, 0.08);
}

/* ---------- Tema escuro (padrão dos painéis) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ws-bg: #0a0b0a;
    --ws-surface: rgba(18, 20, 18, 0.86);
    --ws-surface-solid: #121412;
    --ws-surface-2: #1a1d1a;
    --ws-surface-3: #232723;
    --ws-surface-inverse: #edefec;
    --ws-border: #262a26;
    --ws-border-strong: #3a403a;
    --ws-text: #edefec;
    --ws-text-2: #b5bbb4;
    --ws-text-3: #8f968e;   /* 6,5:1 sobre o fundo, 6,1:1 sobre superfícies */
    --ws-text-inverse: #0b0c0b;
    --ws-accent-ink: #00ff00;
    --ws-accent-soft: rgba(0, 255, 0, 0.1);
    --ws-accent-border: rgba(0, 255, 0, 0.4);
    --ws-focus: #00ff00;
    --ws-focus-halo: rgba(0, 255, 0, 0.3);
    --ws-success: #00ff00;
    --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-chart-1: #00ff00;
    --ws-chart-2: #5aa9ff;
    --ws-chart-grid: rgba(255, 255, 255, 0.08);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ws-bg: #0a0b0a;
  --ws-surface: rgba(18, 20, 18, 0.86);
  --ws-surface-solid: #121412;
  --ws-surface-2: #1a1d1a;
  --ws-surface-3: #232723;
  --ws-surface-inverse: #edefec;
  --ws-border: #262a26;
  --ws-border-strong: #3a403a;
  --ws-text: #edefec;
  --ws-text-2: #b5bbb4;
  --ws-text-3: #8f968e;
  --ws-text-inverse: #0b0c0b;
  --ws-accent-ink: #00ff00;
  --ws-accent-soft: rgba(0, 255, 0, 0.1);
  --ws-accent-border: rgba(0, 255, 0, 0.4);
  --ws-focus: #00ff00;
  --ws-focus-halo: rgba(0, 255, 0, 0.3);
  --ws-success: #00ff00;
  --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-chart-1: #00ff00;
  --ws-chart-2: #5aa9ff;
  --ws-chart-grid: rgba(255, 255, 255, 0.08);
}

/* ---------- Preferências (mantidas do WS Glass) ---------- */
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%; }
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; }
html[data-effects="reduzidos"] { --ws-blur: 0px; --ws-saturate: 100%; --ws-shadow-lg: var(--ws-shadow-md); }

:root[data-palette="contraste"] {
  --ws-text-2: #1f231f; --ws-text-3: #363b36; --ws-border: #b9beb7; --ws-border-strong: #7d837c;
}
:root[data-theme="dark"][data-palette="contraste"] {
  --ws-text-2: #e6e9e5; --ws-text-3: #c8cdc7; --ws-border: #4a504a; --ws-border-strong: #6f766e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-palette="contraste"] {
    --ws-text-2: #e6e9e5; --ws-text-3: #c8cdc7; --ws-border: #4a504a; --ws-border-strong: #6f766e;
  }
}

@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; }
}