/* ============================================================
   vars.css — Variáveis globais do sistema
   Escola Maria Dutra | Sistema Web Escolar
   ============================================================ */

@font-face {
    font-family: 'Fjalla One';
    src: url('../fonts/FjallaOne-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sora';
    src: local('Sora'), local('Sora-Regular');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: local('IBM Plex Sans'), local('IBMPlexSans-Regular');
    font-weight: 400 700;
    font-style: normal;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: local('IBM Plex Mono'), local('IBMPlexMono-Regular');
    font-weight: 400;
    font-style: normal;
}

:root {
    /* ---- Superfícies ---------------------------------------- */
    --fundo:            #0f172a;
    --fundo-alt:        #0a1020;      /* fundo mais escuro (sidebar) */
    --card:             #1e293b;
    --card-hover:       #263548;
    --borda:            #334155;
    --borda-sutil:      #1e293b;

    /* ---- Cores de destaque ---------------------------------- */
    --primaria:         #38bdf8;
    --primaria-hover:   #0ea5e9;
    --primaria-bg:      rgba(56,189,248,.10);
    --sucesso:          #4ade80;
    --sucesso-bg:       rgba(74,222,128,.10);
    --aviso:            #facc15;
    --aviso-bg:         rgba(250,204,21,.10);
    --perigo:           #f87171;
    --perigo-bg:        rgba(248,113,113,.10);
    --info:             #a78bfa;
    --info-bg:          rgba(167,139,250,.10);

    /* ---- Texto ---------------------------------------------- */
    --texto:            #e2e8f0;
    --texto-muted:      #94a3b8;
    --texto-sutil:      #475569;
    --texto-link:       #38bdf8;
    --texto-link-hover: #7dd3fc;

    /* ---- Tipografia ----------------------------------------- */
    --fonte-titulo: 'Fjalla One', 'Sora', 'Segoe UI', system-ui, sans-serif;
    --fonte-corpo:  'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --fonte-mono:   'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    --fonte-base:   14px;
    --linha:        1.5;

    /* ---- Escala tipográfica --------------------------------- */
    --t-xs:   11px;
    --t-sm:   12px;
    --t-md:   14px;
    --t-lg:   16px;
    --t-xl:   20px;
    --t-2xl:  24px;
    --t-3xl:  30px;
    --t-4xl:  36px;

    /* ---- Espaçamentos --------------------------------------- */
    --esp-xs:   4px;
    --esp-sm:   8px;
    --esp-md:  14px;
    --esp-lg:  20px;
    --esp-xl:  30px;
    --esp-2xl: 48px;

    /* ---- Componentes --------------------------------------- */
    --raio:     8px;
    --raio-sm:  4px;
    --raio-lg: 12px;
    --raio-xl: 20px;
    --raio-full: 9999px;

    --sombra-sm:  0 1px 4px rgba(0,0,0,.3);
    --sombra:     0 4px 16px rgba(0,0,0,.4);
    --sombra-lg:  0 8px 32px rgba(0,0,0,.5);
    --sombra-xl:  0 16px 48px rgba(0,0,0,.6);

    --transicao:       .2s ease;
    --transicao-lenta: .35s ease;

    /* ---- Layout -------------------------------------------- */
    --sidebar-larg:   240px;
    --sidebar-recolh:  56px;
    --header-alt:      56px;
    --conteudo-max:  1280px;
    --layout-largura-max: 1560px;
    --layout-largura-gap: 20px;
    --layout-largura-gap-tablet: 14px;

    /* ---- Topo das paginas ---------------------------------- */
    --page-top-gap: 12px;
    --page-top-margin: 18px;
    --page-top-padding: 14px 18px;
    --page-top-kicker-margin: 8px;
    --page-top-kicker-pad-y: 6px;
    --page-top-kicker-pad-x: 12px;
    --page-top-kicker-font: 11px;
    --page-top-title-margin: 6px;
    --page-top-title-size: 1.55rem;
    --page-top-title-line: 1.08;
    --page-top-sub-size: 13px;
    --page-top-sub-line: 1.4;
    --page-top-sub-max: 64ch;
    --page-top-stats-gap: 10px;
    --page-top-stats-margin: 8px;
    --page-top-stat-padding: 8px 10px;
    --page-top-stat-value-size: 1.45rem;
    --page-top-stat-label-size: 11px;

    /* ---- Z-index ------------------------------------------- */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sidebar:  200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
}