/*
 * StaffLink Design System — Tokens
 * ---------------------------------
 * Fonte única de verdade para cor, espaçamento, radius, sombra, tipografia
 * e transição. Nada aqui deve conter regra visual pronta (isso vai em
 * components.css) — só variáveis. Qualquer CSS novo do projeto deve
 * consumir essas variáveis em vez de valores soltos.
 *
 * O roxo de marca (#7460ee) é preservado como --color-primary-600 pra não
 * criar dois roxos diferentes na mesma aplicação: o Bootstrap vendorizado
 * (core/static/css/colors/purple.css) e várias telas já existentes usam
 * exatamente esse hex pra .btn-primary, links, gradientes etc.
 */

:root {
    /* ---- Cor: escala primária (roxo) ---- */
    --color-primary-50: #F3F1FE;
    --color-primary-100: #E8E4FD;
    --color-primary-200: #D3CCFB;
    --color-primary-300: #B3A3F7;
    --color-primary-400: #9478F1;
    --color-primary-500: #7F63EA;
    --color-primary-600: #7460EE; /* marca StaffLink — não alterar sem alinhar com purple.css */
    --color-primary-700: #5B46E0;
    --color-primary-800: #4933B8;
    --color-primary-900: #392791;

    --color-primary: var(--color-primary-600);
    --color-primary-hover: var(--color-primary-700);
    --color-primary-soft: var(--color-primary-50);

    /* ---- Cor: secundária (neutro azulado, pra ações/ênfases menores) ---- */
    --color-secondary-50: #F1F4F8;
    --color-secondary-200: #D6DDE8;
    --color-secondary-500: #64748B;
    --color-secondary-700: #45505F;
    --color-secondary: var(--color-secondary-500);

    /* ---- Cor: superfícies e fundo ---- */
    --color-background: #F7F8FC;
    --color-surface: #FFFFFF;
    --color-surface-muted: #FBFBFD;
    --color-border: #E9EBF3;
    --color-border-strong: #DCDFEA;

    /* ---- Cor: texto ---- */
    --color-text-primary: #262B3D;
    --color-text-secondary: #8A92A6;
    --color-text-muted: #ACB2C2;
    --color-text-on-primary: #FFFFFF;

    /* ---- Cor: semânticas ---- */
    --color-success: #1E9E5A;
    --color-success-soft-bg: #E8F7EE;
    --color-success-soft-text: #1E7E48;
    --color-success-soft-border: #CDEFDA;

    --color-warning: #E68A00;
    --color-warning-soft-bg: #FFF4E0;
    --color-warning-soft-text: #B36B00;
    --color-warning-soft-border: #FCE3B0;

    --color-danger: #E0334D;
    --color-danger-soft-bg: #FDECEE;
    --color-danger-soft-text: #C2273F;
    --color-danger-soft-border: #F8CDD4;

    --color-info: #2E6BE6;
    --color-info-soft-bg: #EAF1FE;
    --color-info-soft-text: #2054B8;
    --color-info-soft-border: #CFE0FC;

    --color-neutral-soft-bg: #F1F2F6;
    --color-neutral-soft-text: #6B7280;
    --color-neutral-soft-border: #E2E4EC;

    /* ---- Espaçamento ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    /* ---- Radius ---- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ---- Sombra (sempre suave — nunca "pesada") ---- */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 10px 30px rgba(16, 24, 40, 0.12);

    /* ---- Tipografia ---- */
    --font-family-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fs-xs: 11px;
    --fs-sm: 12.5px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 28px;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ---- Transição ---- */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;

    /* ---- Foco (acessibilidade) ---- */
    --focus-ring: 0 0 0 3px rgba(116, 96, 238, .25);

    /* ---- Sidebar (tema escuro) ---- */
    --color-sidebar-bg: #1C1638;
    --color-sidebar-bg-elevated: #241C46;
    --color-sidebar-border: rgba(255, 255, 255, .08);
    --color-sidebar-text: rgba(255, 255, 255, .68);
    --color-sidebar-text-strong: #FFFFFF;
    --color-sidebar-icon: rgba(255, 255, 255, .45);
    --color-sidebar-hover-bg: rgba(255, 255, 255, .06);
    --color-sidebar-active-bg: var(--color-primary-600);
    --color-sidebar-active-text: #FFFFFF;
}