/* ============================================================
   GTI IoT — Design Tokens
   Fonte única de verdade para cores, tipografia e espaçamento.

   COMO USAR:
     Todo base template (autenticado, público, operador) carrega
     este arquivo ANTES de qualquer CSS de layout. Assim qualquer
     mudança de marca afeta todos os contextos de uma vez.

   DEFERRED REFACTOR (registrado em ops/design_system_plan.md):
     - gti-layout.css ainda define suas próprias variáveis :root.
     - Quando refatorado, ele passará a @import este arquivo e
       remover as variáveis duplicadas.
     - andon.html ainda tem estilos inline — extrair para
       gti-operator.css e carregar este arquivo como base.
     - Bootstrap hoje é CDN; migrar para servir localmente.
   ============================================================ */

:root {
    /* ── Identidade de Marca ─────────────────────────────────── */
    --gti-brand-blue: #0369a1;        /* Azul GTI institucional  */
    --gti-brand-blue-dark: #075985;
    --gti-brand-blue-light: #0ea5e9;

    /* ── Cores Primárias (interface) ─────────────────────────── */
    --gti-primary: #0369a1;
    --gti-primary-dark: #075985;
    --gti-primary-light: #0ea5e9;
    --gti-primary-contrast: #ffffff;

    /* ── Paleta Slate (UI neutro) ────────────────────────────── */
    --gti-slate-50:  #f8fafc;
    --gti-slate-100: #f1f5f9;
    --gti-slate-200: #e2e8f0;
    --gti-slate-300: #cbd5e1;
    --gti-slate-400: #94a3b8;
    --gti-slate-500: #64748b;
    --gti-slate-600: #475569;
    --gti-slate-700: #334155;
    --gti-slate-800: #1e293b;
    --gti-slate-900: #0f172a;

    /* ── Status ──────────────────────────────────────────────── */
    --gti-success: #10b981;
    --gti-warning: #f59e0b;
    --gti-danger:  #ef4444;
    --gti-info:    #06b6d4;

    /* ── Tipografia ──────────────────────────────────────────── */
    --gti-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --gti-font-size-base: 1rem;       /* 16px */
    --gti-font-size-sm:   0.875rem;   /* 14px */
    --gti-font-size-lg:   1.125rem;   /* 18px */
    --gti-font-size-xl:   1.25rem;    /* 20px */
    --gti-font-size-2xl:  1.5rem;     /* 24px */
    --gti-font-size-3xl:  1.875rem;   /* 30px */
    --gti-font-size-4xl:  2.25rem;    /* 36px */
    --gti-font-size-5xl:  3rem;       /* 48px */
    --gti-line-height:    1.6;

    /* ── Espaçamento (múltiplos de 4px) ─────────────────────── */
    --gti-space-1:  0.25rem;
    --gti-space-2:  0.5rem;
    --gti-space-3:  0.75rem;
    --gti-space-4:  1rem;
    --gti-space-6:  1.5rem;
    --gti-space-8:  2rem;
    --gti-space-12: 3rem;
    --gti-space-16: 4rem;
    --gti-space-20: 5rem;
    --gti-space-24: 6rem;

    /* ── Bordas e Radius ─────────────────────────────────────── */
    --gti-radius-sm:  0.25rem;
    --gti-radius-md:  0.5rem;
    --gti-radius-lg:  0.75rem;
    --gti-radius-xl:  1rem;
    --gti-radius-2xl: 1.5rem;
    --gti-border-color: #e2e8f0;

    /* ── Sombras ─────────────────────────────────────────────── */
    --gti-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --gti-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --gti-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --gti-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

    /* ── Transições ──────────────────────────────────────────── */
    --gti-transition: 150ms ease;
    --gti-transition-slow: 300ms ease;

    /* ── Layout Público ──────────────────────────────────────── */
    --gti-public-max-width: 1200px;
    --gti-navbar-height: 64px;
}