/*
  Wortic macOS UI Kit — Semantic Color Tokens
  Labels, fills, surfaces, separators e accent — modelados sobre o
  padrão de camadas do macOS (label hierarchy + fill hierarchy).
  Todos os componentes devem consumir SOMENTE estas variáveis semânticas,
  nunca --wm-brand-* diretamente e nunca valores hex soltos.

  Liquid Glass 2026:
  - Light: superfícies quase-brancas frias flutuando sobre wallpaper
    azulado; sombras em 3 camadas (ring hairline + contato + ambiente).
  - Dark: superfícies #1c1c1f→#2c2c30, nunca preto puro; mesmas sombras,
    mais profundas.
*/

@layer tokens {
  :root,
  :root[data-theme="light"] {
    color-scheme: light;

    /* Labels (texto) — hierarquia de contraste */
    --wm-label-primary: rgba(0, 0, 0, 0.92);
    --wm-label-secondary: rgba(0, 0, 0, 0.56);
    --wm-label-tertiary: rgba(0, 0, 0, 0.36);
    --wm-label-quaternary: rgba(0, 0, 0, 0.2);
    --wm-label-on-accent: #ffffff;

    /* Fills (formas de controle: checkbox, switch track, etc.) */
    --wm-fill-primary: rgba(0, 10, 30, 0.08);
    --wm-fill-secondary: rgba(0, 10, 30, 0.055);
    --wm-fill-tertiary: rgba(0, 10, 30, 0.035);
    --wm-fill-quaternary: rgba(0, 10, 30, 0.02);

    /* Surfaces (fundos de janela / painel) — brancas e frias */
    --wm-surface-base: #eef1f6;
    --wm-surface-primary: #ffffff;
    --wm-surface-secondary: #f7f8fa;
    --wm-surface-tertiary: #eff1f5;
    --wm-surface-elevated: #ffffff;
    --wm-surface-sidebar: #f0f2f6;
    --wm-surface-sunken: #e8ebf0;
    --wm-surface-overlay: rgba(255, 255, 255, 0.84);

    /* Wallpaper de desktop (páginas de demo / exemplos) */
    --wm-wallpaper:
      radial-gradient(80% 60% at 85% -10%, rgba(42, 194, 243, 0.1), transparent 60%),
      radial-gradient(90% 70% at 8% -5%, rgba(29, 89, 240, 0.07), transparent 55%),
      linear-gradient(180deg, #eef1f6 0%, #e3e8f0 100%);

    /* Separators — hairline quase invisível */
    --wm-separator: rgba(0, 0, 0, 0.08);
    --wm-separator-strong: rgba(0, 0, 0, 0.16);
    --wm-separator-opaque: #d8dbe0;

    /* Accent — azul escolhido pelo Will (#1d59f0). Branco em cima: 5.62:1. */
    --wm-accent: #1d59f0;
    --wm-accent-hover: #1a50d8;
    --wm-accent-pressed: #1745bb;
    --wm-accent-fill: rgba(29, 89, 240, 0.12);
    /* accent como TEXTO/icone — separado do accent de preenchimento */
    --wm-accent-text: var(--wm-accent);
    --wm-accent-fill-strong: rgba(29, 89, 240, 0.22);
    --wm-accent-secondary: var(--wm-brand-cyan);

    /* Gradientes de marca — usar só em momentos-assinatura */
    --wm-accent-gradient: linear-gradient(180deg, #3a6ff3 0%, #1d59f0 62%, #1a50d8 100%);
    --wm-brand-gradient: linear-gradient(135deg, #1d59f0 0%, #198fde 55%, #2ac2f3 100%);

    /* Semantic status */
    --wm-success: #127a3a;
    --wm-success-fill: rgba(18, 122, 58, 0.12);
    --wm-warning: #8f5d12;
    --wm-warning-fill: rgba(143, 93, 18, 0.12);
    --wm-error: #c62f25;
    --wm-error-fill: rgba(198, 47, 37, 0.12);

    /* SOLIDOS: unicos tokens que podem receber TEXTO BRANCO em cima.
       Os de cima sao para TEXTO colorido sobre tint. Nao troque os papeis. */
    --wm-success-solid: #127a3a;
    --wm-warning-solid: #8f5d12;
    --wm-error-solid: #c62f25;
    --wm-info: var(--wm-accent);
    --wm-info-fill: rgba(29, 89, 240, 0.12);

    /* Shadows — sempre 3 camadas: ring hairline + contato + ambiente */
    --wm-shadow-color: 220deg 30% 5%;
    --wm-shadow-ring: 0 0 0 0.5px rgba(0, 0, 0, 0.05);
    --wm-shadow-1:
      0 0.5px 1px hsl(var(--wm-shadow-color) / 0.05),
      0 1px 3px hsl(var(--wm-shadow-color) / 0.06);
    --wm-shadow-2:
      0 1px 2px hsl(var(--wm-shadow-color) / 0.05),
      0 3px 8px hsl(var(--wm-shadow-color) / 0.08);
    --wm-shadow-3:
      0 2px 6px hsl(var(--wm-shadow-color) / 0.05),
      0 12px 32px -8px hsl(var(--wm-shadow-color) / 0.16);
    --wm-shadow-4:
      0 2px 6px hsl(var(--wm-shadow-color) / 0.05),
      0 18px 50px -12px hsl(var(--wm-shadow-color) / 0.22);

    /* Sombras compostas prontas (ring + contato + ambiente) */
    --wm-shadow-panel:
      0 0 0 0.5px rgba(0, 0, 0, 0.04),
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 8px 20px -6px rgba(0, 0, 0, 0.1);
    --wm-shadow-floating:
      0 0 0 0.5px rgba(0, 0, 0, 0.05),
      0 1px 3px rgba(0, 0, 0, 0.05),
      0 10px 28px -8px rgba(0, 0, 0, 0.16);
    --wm-shadow-window:
      0 0 0 0.5px rgba(0, 0, 0, 0.05),
      0 2px 6px rgba(0, 0, 0, 0.05),
      0 18px 50px -12px rgba(0, 0, 0, 0.22);

    /* Inner highlights (superfícies elevadas no light) */
    --wm-shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --wm-shadow-inner-hairline: inset 0 0 0 0.5px rgba(255, 255, 255, 0.4);

    /* Materials (glass/vibrancy) */
    --wm-material-sidebar-bg: rgba(243, 246, 250, 0.62);
    --wm-material-toolbar-bg: rgba(255, 255, 255, 0.65);
    --wm-material-popover-bg: rgba(252, 253, 255, 0.75);
    --wm-material-sheet-bg: rgba(255, 255, 255, 0.85);
    --wm-material-hud-bg: rgba(28, 28, 31, 0.75);
    --wm-material-hud-label: #ffffff;
    --wm-material-glass-border: rgba(255, 255, 255, 0.45);
    --wm-material-blur: 40px;
    --wm-material-blur-strong: 44px;
    --wm-material-blur-heavy: 56px;
    --wm-material-saturate: 2;
    --wm-material-saturate-strong: 2;
    --wm-material-saturate-heavy: 2.1;

    /* Superficies de CONTROLE (face fisica de botao/thumb).
       Existem para que nenhum componente precise declarar cinza na mao. */
    --wm-control-face-top: #ffffff;
    --wm-control-face-bottom: #f5f5f3;
    --wm-control-face-top-hover: #ffffff;
    --wm-control-face-bottom-hover: #fafaf9;
    --wm-control-face-top-pressed: #ececea;
    --wm-control-face-bottom-pressed: #e7e7e4;
    --wm-control-thumb-top: #ffffff;
    --wm-control-thumb-bottom: #f4f4f2;
    --wm-control-thumb-disabled: #fcfcfb;

    /* Scrollbar */
    --wm-scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --wm-scrollbar-thumb-hover: rgba(0, 0, 0, 0.32);

    /* Selection (texto selecionado) */
    --wm-selection-bg: rgba(29, 89, 240, 0.24);
  }

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

    --wm-label-primary: rgba(255, 255, 255, 0.94);
    --wm-label-secondary: rgba(255, 255, 255, 0.6);
    --wm-label-tertiary: rgba(255, 255, 255, 0.38);
    --wm-label-quaternary: rgba(255, 255, 255, 0.22);
    --wm-label-on-accent: #ffffff;

    --wm-fill-primary: rgba(255, 255, 255, 0.13);
    --wm-fill-secondary: rgba(255, 255, 255, 0.09);
    --wm-fill-tertiary: rgba(255, 255, 255, 0.06);
    --wm-fill-quaternary: rgba(255, 255, 255, 0.035);

    --wm-surface-base: #1c1c1f;
    --wm-surface-primary: #262629;
    --wm-surface-secondary: #212124;
    --wm-surface-tertiary: #2c2c30;
    --wm-surface-elevated: #2f2f33;
    --wm-surface-sidebar: #202023;
    --wm-surface-sunken: #161618;
    --wm-surface-overlay: rgba(38, 38, 41, 0.85);

    --wm-wallpaper:
      radial-gradient(80% 60% at 85% -10%, rgba(42, 194, 243, 0.07), transparent 60%),
      radial-gradient(90% 70% at 8% -5%, rgba(29, 89, 240, 0.09), transparent 55%),
      linear-gradient(180deg, #17191e 0%, #101114 100%);

    --wm-separator: rgba(255, 255, 255, 0.08);
    --wm-separator-strong: rgba(255, 255, 255, 0.15);
    --wm-separator-opaque: #3a3a3e;

    --wm-accent: #1d59f0;
    --wm-accent-hover: #1a50d8;
    --wm-accent-pressed: #1745bb;
    --wm-accent-fill: rgba(29, 89, 240, 0.22);
      /* accent como TEXTO/icone no escuro precisa clarear (6.74:1) */
      --wm-accent-text: #83a4f7;
    --wm-accent-fill-strong: rgba(29, 89, 240, 0.34);
    --wm-accent-secondary: var(--wm-brand-cyan);

    --wm-accent-gradient: linear-gradient(180deg, #3a6ff3 0%, #1d59f0 62%, #1a50d8 100%);
    --wm-brand-gradient: linear-gradient(135deg, #1d59f0 0%, #198fde 55%, #2ac2f3 100%);

    --wm-success: #32d074;
    --wm-success-fill: rgba(50, 208, 116, 0.16);
    --wm-warning: #e2a53d;
    --wm-warning-fill: rgba(226, 165, 61, 0.16);
    --wm-error: #ff6b60;
    --wm-error-fill: rgba(255, 107, 96, 0.16);

      /* SOLIDOS (mesmos do light): so eles recebem texto branco */
      --wm-success-solid: #127a3a;
      --wm-warning-solid: #8f5d12;
      --wm-error-solid: #c62f25;
    --wm-info: #83a4f7;
    --wm-info-fill: rgba(127, 179, 220, 0.16);

    --wm-shadow-color: 220deg 30% 2%;
    --wm-shadow-ring: 0 0 0 0.5px rgba(255, 255, 255, 0.08);
    --wm-shadow-1:
      0 0.5px 1px hsl(var(--wm-shadow-color) / 0.3),
      0 1px 3px hsl(var(--wm-shadow-color) / 0.3);
    --wm-shadow-2:
      0 1px 2px hsl(var(--wm-shadow-color) / 0.3),
      0 3px 10px hsl(var(--wm-shadow-color) / 0.36);
    --wm-shadow-3:
      0 2px 6px hsl(var(--wm-shadow-color) / 0.3),
      0 14px 36px -8px hsl(var(--wm-shadow-color) / 0.5);
    --wm-shadow-4:
      0 2px 8px hsl(var(--wm-shadow-color) / 0.35),
      0 24px 64px -12px hsl(var(--wm-shadow-color) / 0.6);

    --wm-shadow-panel:
      0 0 0 0.5px rgba(255, 255, 255, 0.06),
      0 1px 2px rgba(0, 0, 0, 0.4),
      0 10px 24px -6px rgba(0, 0, 0, 0.5);
    --wm-shadow-floating:
      0 0 0 0.5px rgba(255, 255, 255, 0.07),
      0 2px 6px rgba(0, 0, 0, 0.45),
      0 14px 36px -8px rgba(0, 0, 0, 0.55);
    --wm-shadow-window:
      0 0 0 0.5px rgba(255, 255, 255, 0.08),
      0 3px 8px rgba(0, 0, 0, 0.5),
      0 24px 64px -12px rgba(0, 0, 0, 0.65);

    --wm-shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --wm-shadow-inner-hairline: inset 0 0 0 0.5px rgba(255, 255, 255, 0.09);

    --wm-material-sidebar-bg: rgba(28, 28, 32, 0.6);
    --wm-material-toolbar-bg: rgba(34, 34, 38, 0.6);
    --wm-material-popover-bg: rgba(40, 40, 44, 0.72);
    --wm-material-sheet-bg: rgba(34, 34, 38, 0.84);
    --wm-material-hud-bg: rgba(18, 18, 20, 0.78);
    --wm-material-hud-label: #ffffff;
    --wm-material-glass-border: rgba(255, 255, 255, 0.14);
--wm-material-blur: 40px;
    --wm-material-blur-strong: 44px;
    --wm-material-blur-heavy: 56px;
    --wm-material-saturate: 1.8;
    --wm-material-saturate-strong: 1.8;
    --wm-material-saturate-heavy: 1.9;

    --wm-control-face-top: #58585f;
    --wm-control-face-bottom: #4b4b51;
    --wm-control-face-top-hover: #616168;
    --wm-control-face-bottom-hover: #55555c;
    --wm-control-face-top-pressed: #414147;
    --wm-control-face-bottom-pressed: #3b3b41;
    --wm-control-thumb-top: #ffffff;
    --wm-control-thumb-bottom: #f4f4f2;
    --wm-control-thumb-disabled: #77777d;

    --wm-scrollbar-thumb: rgba(255, 255, 255, 0.22);
    --wm-scrollbar-thumb-hover: rgba(255, 255, 255, 0.34);

    --wm-selection-bg: rgba(29, 89, 240, 0.32);
  }

  /* prefers-color-scheme automático quando não há data-theme explícito.
     Manter em PARIDADE EXATA com :root[data-theme="dark"] acima. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;

      --wm-label-primary: rgba(255, 255, 255, 0.94);
      --wm-label-secondary: rgba(255, 255, 255, 0.6);
      --wm-label-tertiary: rgba(255, 255, 255, 0.38);
      --wm-label-quaternary: rgba(255, 255, 255, 0.22);
      --wm-label-on-accent: #ffffff;

      --wm-fill-primary: rgba(255, 255, 255, 0.13);
      --wm-fill-secondary: rgba(255, 255, 255, 0.09);
      --wm-fill-tertiary: rgba(255, 255, 255, 0.06);
      --wm-fill-quaternary: rgba(255, 255, 255, 0.035);

      --wm-surface-base: #1c1c1f;
      --wm-surface-primary: #262629;
      --wm-surface-secondary: #212124;
      --wm-surface-tertiary: #2c2c30;
      --wm-surface-elevated: #2f2f33;
      --wm-surface-sidebar: #202023;
      --wm-surface-sunken: #161618;
      --wm-surface-overlay: rgba(38, 38, 41, 0.85);

      --wm-wallpaper:
        radial-gradient(80% 60% at 85% -10%, rgba(42, 194, 243, 0.07), transparent 60%),
        radial-gradient(90% 70% at 8% -5%, rgba(29, 89, 240, 0.09), transparent 55%),
        linear-gradient(180deg, #17191e 0%, #101114 100%);

      --wm-separator: rgba(255, 255, 255, 0.08);
      --wm-separator-strong: rgba(255, 255, 255, 0.15);
      --wm-separator-opaque: #3a3a3e;

      --wm-accent: #1d59f0;
      --wm-accent-hover: #1a50d8;
      --wm-accent-pressed: #1745bb;
      --wm-accent-fill: rgba(29, 89, 240, 0.22);
      /* accent como TEXTO/icone no escuro precisa clarear (6.74:1) */
      --wm-accent-text: #83a4f7;
      --wm-accent-fill-strong: rgba(29, 89, 240, 0.34);
      --wm-accent-secondary: var(--wm-brand-cyan);

      --wm-accent-gradient: linear-gradient(180deg, #3a6ff3 0%, #1d59f0 62%, #1a50d8 100%);
      --wm-brand-gradient: linear-gradient(135deg, #1d59f0 0%, #198fde 55%, #2ac2f3 100%);

      --wm-success: #32d074;
      --wm-success-fill: rgba(50, 208, 116, 0.16);
      --wm-warning: #e2a53d;
      --wm-warning-fill: rgba(226, 165, 61, 0.16);
      --wm-error: #ff6b60;
      --wm-error-fill: rgba(255, 107, 96, 0.16);

      /* SOLIDOS (mesmos do light): so eles recebem texto branco */
      --wm-success-solid: #127a3a;
      --wm-warning-solid: #8f5d12;
      --wm-error-solid: #c62f25;
      --wm-info: #83a4f7;
      --wm-info-fill: rgba(127, 179, 220, 0.16);

      --wm-shadow-color: 220deg 30% 2%;
      --wm-shadow-ring: 0 0 0 0.5px rgba(255, 255, 255, 0.08);
      --wm-shadow-1:
        0 0.5px 1px hsl(var(--wm-shadow-color) / 0.3),
        0 1px 3px hsl(var(--wm-shadow-color) / 0.3);
      --wm-shadow-2:
        0 1px 2px hsl(var(--wm-shadow-color) / 0.3),
        0 3px 10px hsl(var(--wm-shadow-color) / 0.36);
      --wm-shadow-3:
        0 2px 6px hsl(var(--wm-shadow-color) / 0.3),
        0 14px 36px -8px hsl(var(--wm-shadow-color) / 0.5);
      --wm-shadow-4:
        0 2px 8px hsl(var(--wm-shadow-color) / 0.35),
        0 24px 64px -12px hsl(var(--wm-shadow-color) / 0.6);

      --wm-shadow-panel:
        0 0 0 0.5px rgba(255, 255, 255, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 10px 24px -6px rgba(0, 0, 0, 0.5);
      --wm-shadow-floating:
        0 0 0 0.5px rgba(255, 255, 255, 0.07),
        0 2px 6px rgba(0, 0, 0, 0.45),
        0 14px 36px -8px rgba(0, 0, 0, 0.55);
      --wm-shadow-window:
        0 0 0 0.5px rgba(255, 255, 255, 0.08),
        0 3px 8px rgba(0, 0, 0, 0.5),
        0 24px 64px -12px rgba(0, 0, 0, 0.65);

      --wm-shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      --wm-shadow-inner-hairline: inset 0 0 0 0.5px rgba(255, 255, 255, 0.09);

      --wm-material-sidebar-bg: rgba(28, 28, 32, 0.6);
      --wm-material-toolbar-bg: rgba(34, 34, 38, 0.6);
      --wm-material-popover-bg: rgba(40, 40, 44, 0.72);
      --wm-material-sheet-bg: rgba(34, 34, 38, 0.84);
      --wm-material-hud-bg: rgba(18, 18, 20, 0.78);
      --wm-material-hud-label: #ffffff;
      --wm-material-glass-border: rgba(255, 255, 255, 0.14);
      --wm-material-blur: 40px;
      --wm-material-blur-strong: 44px;
      --wm-material-blur-heavy: 56px;
      --wm-material-saturate: 1.8;
      --wm-material-saturate-strong: 1.8;
      --wm-material-saturate-heavy: 1.9;

      --wm-control-face-top: #58585f;
      --wm-control-face-bottom: #4b4b51;
      --wm-control-face-top-hover: #616168;
      --wm-control-face-bottom-hover: #55555c;
      --wm-control-face-top-pressed: #414147;
      --wm-control-face-bottom-pressed: #3b3b41;
      --wm-control-thumb-top: #ffffff;
      --wm-control-thumb-bottom: #f4f4f2;
      --wm-control-thumb-disabled: #77777d;

      --wm-scrollbar-thumb: rgba(255, 255, 255, 0.22);
      --wm-scrollbar-thumb-hover: rgba(255, 255, 255, 0.34);

      --wm-selection-bg: rgba(29, 89, 240, 0.32);
    }
  }
}