/*
  Wortic macOS UI Kit — Design Tokens
  Fonte da verdade para todos os valores atômicos do sistema.
  Nenhum componente deve declarar um valor "mágico" fora daqui.
*/

@layer tokens {
  :root {
    /* ============================================================
       BRAND — extraído dos arquivos de logo oficiais (wordmark.svg,
       head.svg, ring.svg, pattern.svg). Confirmado em 4 arquivos
       independentes: cyan, azul, azul-violeta e índigo profundo.
       ============================================================ */
    --wm-brand-cyan: #2ac2f3;
    /* azul claro do logo (hue 204°) — grafico, ilustracao e gradiente.
       NUNCA receber texto branco em cima (3.49:1); com preto da 6.03:1. */
    --wm-brand-blue-light: #198fde;
    --wm-brand-blue: #0049ff;
    --wm-brand-blue-violet: #020bb5;
    --wm-brand-indigo: #0a008e;
    --wm-brand-black: #000000;
    --wm-brand-white: #ffffff;

    /* ============================================================
       SPACING — escala base 4px
       ============================================================ */
    --wm-space-0: 0;
    --wm-space-1: 2px;
    --wm-space-2: 4px;
    --wm-space-3: 6px;
    --wm-space-4: 8px;
    --wm-space-5: 10px;
    --wm-space-6: 12px;
    --wm-space-7: 14px;
    --wm-space-8: 16px;
    --wm-space-9: 20px;
    --wm-space-10: 24px;
    --wm-space-11: 32px;
    --wm-space-12: 40px;
    --wm-space-13: 48px;
    --wm-space-14: 64px;

    /* ============================================================
       RADIUS
       ============================================================ */
    --wm-radius-xs: 4px;
    --wm-radius-sm: 6px;
    --wm-radius-md: 8px;
    --wm-radius-lg: 10px;
    --wm-radius-xl: 14px;
    --wm-radius-2xl: 18px;
    --wm-radius-pill: 999px;
    --wm-radius-hairline: 1px;

    /* Liquid Glass (macOS 2026): janelas e painéis flutuantes usam
       cantos bem mais generosos que cards de conteúdo comum. */
    --wm-radius-window: 22px;
    --wm-radius-window-xl: 26px;
    --wm-radius-panel: 16px;
    --wm-radius-sheet-top: 16px;

    /* Radius de agrupamentos de conteúdo (inset groups à la Settings) */
    --wm-radius-list-group: 12px;
    --wm-radius-settings-group: 12px;
    --wm-radius-settings-icon: 7px;

    /* ============================================================
       CONTROL HEIGHTS
       ============================================================ */
    --wm-control-height-xs: 20px;
    --wm-control-height-sm: 24px;
    --wm-control-height-md: 28px;
    --wm-control-height-lg: 34px;
    --wm-control-height-xl: 40px;

    /* ============================================================
       ICON SIZES
       ============================================================ */
    --wm-icon-xs: 12px;
    --wm-icon-sm: 14px;
    --wm-icon-md: 16px;
    --wm-icon-lg: 20px;
    --wm-icon-xl: 24px;

    /* ============================================================
       TIPOGRAFIA
       ============================================================ */
    --wm-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
      "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
    --wm-font-family-mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Code",
      Consolas, monospace;

    /* Tamanhos: tabela oficial HIG > Typography > macOS.
       Nao invente valores aqui — cada um tem leading e tracking pareados. */
    --wm-font-size-caption2: 10px;
    --wm-font-size-caption: 10px;
    --wm-font-size-footnote: 10px;
    --wm-font-size-subheadline: 11px;
    --wm-font-size-callout: 12px;
    --wm-font-size-body: 13px;
    --wm-font-size-headline: 13px;
    --wm-font-size-title3: 15px;
    --wm-font-size-title2: 17px;
    --wm-font-size-title1: 22px;
    --wm-font-size-large-title: 26px;

    /* Leading ABSOLUTO (a Apple publica leading, nao multiplicador) */
    --wm-leading-caption2: 13px;
    --wm-leading-caption: 13px;
    --wm-leading-footnote: 13px;
    --wm-leading-subheadline: 14px;
    --wm-leading-callout: 15px;
    --wm-leading-body: 16px;
    --wm-leading-headline: 16px;
    --wm-leading-title3: 20px;
    --wm-leading-title2: 22px;
    --wm-leading-title1: 26px;
    --wm-leading-large-title: 32px;

    /* Tracking por TAMANHO, conforme a tabela de tracking do SF.
       Repare que a partir de ~23pt a Apple volta a ABRIR o espacamento. */
    --wm-tracking-caption2: 0.12px;
    --wm-tracking-caption: 0.12px;
    --wm-tracking-footnote: 0.12px;
    --wm-tracking-subheadline: 0.06px;
    --wm-tracking-callout: 0px;
    --wm-tracking-body: -0.08px;
    --wm-tracking-headline: -0.08px;
    --wm-tracking-title3: -0.23px;
    --wm-tracking-title2: -0.43px;
    --wm-tracking-title1: -0.26px;
    --wm-tracking-large-title: 0.22px;

    --wm-line-height-tight: 1.15;
    --wm-line-height-normal: 1.35;
    --wm-line-height-relaxed: 1.5;

    --wm-font-weight-regular: 400;
    --wm-font-weight-medium: 500;
    --wm-font-weight-semibold: 590;
    --wm-font-weight-bold: 700;

    --wm-letter-spacing-tighter: -0.02em;
    --wm-letter-spacing-tight: -0.01em;
    --wm-letter-spacing-normal: 0;
    --wm-letter-spacing-wide: 0.02em;

    /* ============================================================
       MOTION
       ============================================================ */
    --wm-duration-instant: 60ms;
    --wm-duration-fast: 120ms;
    --wm-duration-normal: 180ms;
    --wm-duration-slow: 260ms;

    --wm-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --wm-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
    --wm-ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
    --wm-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

    --wm-scale-pressed: 0.985;
    --wm-scale-pressed-sm: 0.97;
    --wm-scale-hover-raise: -1px;

    /* ============================================================
       ELEVATION (z-index scale)
       ============================================================ */
    --wm-z-base: 0;
    --wm-z-sticky: 100;
    --wm-z-toolbar: 200;
    --wm-z-sidebar: 300;
    --wm-z-popover: 400;
    --wm-z-dropdown: 410;
    --wm-z-sheet: 500;
    --wm-z-modal: 600;
    --wm-z-toast: 700;
    --wm-z-tooltip: 800;

    /* ============================================================
       BORDER WIDTH
       ============================================================ */
    --wm-border-width-hairline: 0.5px;
    --wm-border-width-thin: 1px;
    --wm-border-width-thick: 2px;

    /* ============================================================
       FOCUS RING — anel duplo: traço de accent + halo suave
       ============================================================ */
    --wm-focus-ring-width: 2px;
    --wm-focus-ring-offset: 1px;
    --wm-focus-halo-width: 4px;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --wm-duration-instant: 0ms;
      --wm-duration-fast: 0ms;
      --wm-duration-normal: 0ms;
      --wm-duration-slow: 0ms;
    }
  }
}