/* ============================================================
   CRM TRAVEL — Design Tokens (Single Source of Truth)
   WCAG AAA — Contraste ≥ 7:1 para texto normal
   Público: 40+ anos, prioridade máxima em legibilidade
   ============================================================
   Uso:  <link rel="stylesheet" href="tokens.css?v=X">
         (carregado antes do output.css no main.php)
   ============================================================ */

/* ==========================================
   TEMA LIGHT (default)
   ========================================== */
:root {
    /* Backgrounds */
    --bg-shell:        #F0F2F5;
    --bg-primary:      #FFFFFF;
    --bg-secondary:    #F8FAFC;
    --bg-tertiary:     #F1F5F9;
    --bg-input:        #FFFFFF;
    --bg-hover:        #F1F5F9;

    /* Bordas */
    --border-subtle:   #E2E8F0;
    --border-default:  #CBD5E1;
    --border-strong:   #94A3B8;
    --border-focus:    #3B82F6;

    /* Texto — WCAG AAA */
    --text-primary:    #0F172A;   /* ~20:1 sobre branco */
    --text-secondary:  #334155;   /* ~10:1 sobre branco */
    --text-tertiary:   #64748B;   /* ~4.6:1 — só para metadados */
    --text-disabled:   #94A3B8;

    /* Accent */
    --accent-blue:        #2563EB;
    --accent-blue-hover:  #1D4ED8;
    --accent-purple:      #6D28D9;
    --accent-purple-hover:#5B21B6;

    /* Status — versão ESCURA para light mode (contraste máximo) */
    --status-error:   #B91C1C;
    --status-warning: #92400E;
    --status-success: #065F46;
    --status-info:    #1E40AF;

    /* Status BG tint (8% opacity) */
    --status-error-bg:   rgba(239,68,68,0.08);
    --status-warning-bg: rgba(245,158,11,0.08);
    --status-success-bg: rgba(16,185,129,0.08);
    --status-info-bg:    rgba(59,130,246,0.08);
    --status-ia:         #7C3AED;
    --status-financial:  #0D9488;

    --status-error-bg:   rgba(239,68,68,0.08);
    --status-warning-bg: rgba(245,158,11,0.08);
    --status-success-bg: rgba(16,185,129,0.08);
    --status-info-bg:    rgba(59,130,246,0.08);
    --status-ia-bg:      rgba(124,58,237,0.08);
    --status-financial-bg: rgba(13,148,136,0.08);

    --status-error-border:   #FECACA;
    --status-warning-border: #FEF3C7;
    --status-success-border: #D1FAE5;
    --status-info-border:    #DBEAFE;
    --status-ia-border:      #EDE9FE;
    --status-financial-border: #CCFBF1;
}

/* ==========================================
   TEMA DARK (class-based)
   ========================================== */
html.dark {
    /* Backgrounds — depth layers (8-12pt luminance steps) */
    --bg-shell:        #0D0D0D;
    --bg-primary:      #141414;
    --bg-secondary:    #1C1C1E;
    --bg-tertiary:     #242426;
    --bg-input:        #1C1C1E;
    --bg-hover:        #2C2C2E;

    /* Bordas */
    --border-subtle:   #2C2C2E;
    --border-default:  #3A3A3C;
    --border-strong:   #3A3A3C;
    --border-focus:    #5B9BF2;

    /* Texto */
    --text-primary:    #FFFFFF;
    --text-secondary:  #E5E5E5;
    --text-tertiary:   #A0A0A0;
    --text-disabled:   #666666;

    /* Accent */
    --accent-blue:        #5B9BF2;
    --accent-blue-hover:  #4A8BE8;
    --accent-purple:      #A78BFA;
    --accent-purple-hover:#906FE8;

    /* Status — semantic triplets (bg/text/border) */
    --status-error:   #EB5757;
    --status-warning: #F2C94C;
    --status-success: #6FCF97;
    --status-info:    #5B9BF2;
    --status-ia:      #A78BFA;
    --status-financial: #34D1BF;

    --status-error-bg:   #2E1A1A;
    --status-warning-bg: #2E2A1A;
    --status-success-bg: #1A2E1A;
    --status-info-bg:    #1A1E2E;
    --status-ia-bg:      #1E1A2E;
    --status-financial-bg: #1A2A2E;

    --status-error-border:   #5A2D2D;
    --status-warning-border: #5A4E2D;
    --status-success-border: #2D5A2D;
    --status-info-border:    #2D3A5A;
    --status-ia-border:      #3A2D5A;
    --status-financial-border: #2D4E5A;
}

/* ==========================================
   TYPOGRAPHY — Escala de tamanhos
   Mínimo absoluto: 12px (apenas badges/pills)
   Texto visível NUNCA abaixo de 12px.
   ========================================== */
:root {
    --text-xs:         0.75rem;   /* 12px — badges, pills, metadados */
    --text-sm:         0.8125rem; /* 13px — labels, sub-labels */
    --text-base:       0.9375rem; /* 15px — body padrão */
    --text-md:         1rem;      /* 16px — títulos de card */
    --text-lg:         1.125rem;  /* 18px — títulos de seção */
    --text-xl:         1.25rem;   /* 20px — subtítulos */
    --text-2xl:        1.5rem;    /* 24px — títulos de página */
    --text-3xl:        1.75rem;   /* 28px — KPIs */
    --text-4xl:        2rem;      /* 32px — KPIs grandes */

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-black:    900;
}

/* ==========================================
   SPACING SCALE  (base 4px)
   ========================================== */
:root {
    --space-1:  0.25rem;  /*  4px */
    --space-2:  0.5rem;   /*  8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.5rem;   /* 24px */
    --space-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
}

/* ==========================================
   BORDER RADIUS
   ========================================== */
:root {
    --radius-sm:   0.375rem;  /*  6px */
    --radius-md:   0.5rem;    /*  8px */
    --radius-lg:   0.75rem;   /* 12px */
    --radius-xl:   1rem;      /* 16px */
    --radius-2xl:  1.5rem;    /* 24px */
    --radius-full: 9999px;    /* pills */
}

/* ==========================================
   SHADOWS
   ========================================== */
:root {
    --shadow-sm:    0 1px 3px rgba(50,50,93,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:    0 4px 18px rgba(50,50,93,0.12), 0 2px 8px rgba(0,0,0,0.06);
    --shadow-lg:    0 10px 40px rgba(50,50,93,0.15), 0 4px 12px rgba(0,0,0,0.08);
    --shadow-premium: 0 8px 32px rgba(94,106,210,0.15), 0 2px 8px rgba(0,0,0,0.06);
}
html.dark {
    --shadow-sm:    0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:    0 2px 8px rgba(0,0,0,0.4);
    --shadow-lg:    0 4px 16px rgba(0,0,0,0.5);
    --shadow-premium: 0 4px 16px rgba(0,0,0,0.5);
}

/* ==========================================
   COMPONENT TOKENS — Alturas mínimas (acessibilidade)
   Público 40+ anos: targets de toque generosos
   ========================================== */
:root {
    --input-height:   44px;
    --btn-height:     44px;
    --table-row-min:  56px;
    --touch-target:   40px;
    --icon-size:      18px;
}

/* ==========================================
   SCROLLBAR TOKENS & STYLES (Thin, Custom & Themed)
   ========================================== */
:root {
    --scrollbar-width:  6px;
    --scrollbar-track:  transparent;
    --scrollbar-thumb:  rgba(100, 116, 139, 0.35);
    --scrollbar-hover:  rgba(100, 116, 139, 0.60);
}
html.dark {
    --scrollbar-thumb:  rgba(255, 255, 255, 0.12);
    --scrollbar-hover:  rgba(255, 255, 255, 0.22);
}

/* Global scrollbar rules */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}
*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover);
}