/* ==========================================================================
   Pharus Mobile - Design Tokens
   --------------------------------------------------------------------------
   Arquivo: wp-content/themes/app/mobile-view/dist/style/design-tokens.css
   Funcao: tokens CSS globais do mobile-view (cores, espacamento, tipografia,
           raios, sombras, transicoes, layout e z-index).
   Consumo: importado globalmente no mobile-view. Todos os arquivos .css
            deste diretorio podem referenciar os tokens via var(--token).
   Regra:  valores sao a fonte de verdade. Os fallbacks presentes em uso
           (ex: var(--space-4, 16px)) foram normalizados aqui pelo valor
           mais frequente encontrado no codigo.
   ========================================================================== */

:root {
    /* ------------------------------------------------------------------
       1) Spacing
       Escala base de 4px. Use multiplos coerentes; evite valores soltos.
       ------------------------------------------------------------------ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ------------------------------------------------------------------
       2) Colors
       Paleta zinc/gray (neutros) + semanticos (brand/primary/success/etc.).
       --main-color eh o acento do cliente (pode ser sobrescrito por tenant).
       ------------------------------------------------------------------ */

    /* Acento / marca */
    --main-color: #3B82F6;
    --main-color-rgb: 59, 130, 246;
    --color-brand: #3B82F6;
    --primary-color: #3B82F6;
    --color-primary: #3B82F6;

    /* Semanticos */
    --color-success: #059669;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3B82F6;

    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --bg-tertiary: #f4f4f5;
    --bg-white: #ffffff;

    /* Escala neutra (zinc) */
    --gray-50: #fafafa;
    --gray-100: #f4f4f5;
    --gray-200: #e4e4e7;
    --gray-300: #d4d4d8;
    --gray-400: #a1a1aa;
    --gray-500: #71717a;
    --gray-700: #3f3f46;
    --gray-900: #18181b;

    /* Texto */
    --text-primary: #18181b;
    --text-secondary: #52525b;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;

    /* Bordas */
    --border-default: #e4e4e7;
    --border-light: #f4f4f5;

    /* Legados (mantidos para compat com user-menu.css e afins) */
    --brand: #1f5aa6;
    --ink: #222222;
    --muted: #6b7280;
    --line: #e5e7eb;

    /* ------------------------------------------------------------------
       3) Typography
       Escala de tamanhos (xs..2xl), pesos e line-heights.
       ------------------------------------------------------------------ */
    /* v4.77.40 — stack "cara de Apple":
       1. iOS/macOS → San Francisco (sistema) via -apple-system/BlinkMacSystemFont.
       2. Demais OS → Inter (carregada via Google Fonts no header.php), visual
          calibrado pra ser quase indistinguível do SF em telas.
       3. Fallbacks: Segoe UI (Windows), Roboto (Android), sans-serif genérico.
       Inter é a escolha padrão de apps premium modernos (Stripe, Linear,
       Figma, Vercel) quando não há SF nativa. */
    --font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --font-xs: 11px;
    --font-sm: 13px;
    --font-md: 15px;
    --font-lg: 17px;
    --font-xl: 20px;
    --font-2xl: 24px;

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

    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    --tracking-tight: -0.01em;
    --tracking-wide: 0.02em;

    /* ------------------------------------------------------------------
       4) Radius
       ------------------------------------------------------------------ */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50%;

    /* ------------------------------------------------------------------
       5) Shadows
       ------------------------------------------------------------------ */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.12);

    /* ------------------------------------------------------------------
       6) Transitions
       Duracao + easing padrao. Use var(--ease-*) para curvas customizadas.
       ------------------------------------------------------------------ */
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ------------------------------------------------------------------
       7) Layout
       ------------------------------------------------------------------ */
    --page-padding: 20px;
    --touch-target: 44px;
    --header-height: 56px;
    --bottom-nav-height: 56px;
    --input-height: 44px;
    --button-height: 44px;
    --button-height-sm: 36px;

    /* ------------------------------------------------------------------
       8) Z-index
       Escala crescente para empilhamento previsivel.
       ------------------------------------------------------------------ */
    --z-sticky: 100;
    --z-dropdown: 200;
    --z-backdrop: 300;
    --z-overlay: 350;
    --z-modal: 400;
}