/**
 * Concremat — Variaveis de tema (paleta oficial do Manual de Marca, p.18)
 *
 * Pantone 540 C (#173557) e branco sao predominantes.
 * Pantone 158 C (#F18700) eh acento.
 * Tipografia: Arial (sistema digital autorizada pelo manual).
 */

:root {
    /* ===== Paleta Concremat (oficial) ===== */
    --concremat-azul-540:        #173557;  /* Pantone 540 C — principal */
    --concremat-azul-285:        #0078C0;  /* Pantone 285 C */
    --concremat-azul-7688:       #5BA0D1;  /* Pantone 7688 C */
    --concremat-azul-284:        #69ACDF;  /* Pantone 284 C */
    --concremat-azul-cccc:       #004994;  /* Pantone 2945 C — azul logo CCCC */
    --concremat-azul-vivo:       #00B0E8;  /* Pantone 299 C */
    --concremat-laranja:         #F18700;  /* Pantone 158 C — destaque */
    --concremat-verde:           #7AC142;  /* Pantone 368 C — sucesso */
    --concremat-cinza:           #575757;  /* Pantone Cool Gray 9 C */
    --concremat-branco:          #FFFFFF;

    /* ===== Mapeamento semantico ===== */
    --brand-primary:    var(--concremat-azul-540);
    --brand-secondary:  var(--concremat-azul-cccc);
    --brand-accent:     var(--concremat-laranja);
    --brand-info:       var(--concremat-azul-285);
    --brand-success:    var(--concremat-verde);
    --brand-danger:     #DC3545;
    --brand-warning:    var(--concremat-laranja);

    /* Texto */
    --text-primary:     var(--concremat-azul-540);
    --text-default:     #1f2937;
    --text-muted:       #6b7280;
    --text-on-dark:     var(--concremat-branco);

    /* Background / superficies */
    --bg-body:          #F4F5F7;
    --bg-surface:       var(--concremat-branco);
    --bg-surface-alt:   #F8F9FB;
    --border-color:     #E0E3E8;
    --border-strong:    #C8CDD4;

    /* Breakpoints (referencia centralizada — usar em @media e @container) */
    --bp-sm:                   640px;   /* mobile -> tablet portrait */
    --bp-md:                   1024px;  /* tablet -> desktop (sidebar fixa a partir daqui) */
    --bp-lg:                   1280px;  /* desktop -> wide */

    /* Topbar / sidebar-header colapsado compartilham essa altura */
    --topbar-height:           60px;
    --footer-height:           40px;   /* altura fixa do rodape (usada p/ confinar modais) */

    /* Sidebar — header escuro (marca) + corpo claro (estilo SION) */
    --sidebar-width:           260px;
    --sidebar-collapsed-width: 72px;
    --sidebar-header-bg:       var(--concremat-azul-540);  /* topo (logo) */
    --sidebar-bg-1:            #F8F9FA;                     /* corpo: gradiente claro */
    --sidebar-bg-2:            #E9ECEF;
    --sidebar-text:            #495057;                     /* texto dos itens */
    --sidebar-text-icon:       var(--concremat-azul-cccc);  /* icone — azul CCCC */
    --sidebar-hover-bg:        #E9ECEF;
    --sidebar-active-color:    var(--brand-accent);         /* laranja Concremat */
    --sidebar-active-bg:       rgba(241, 135, 0, 0.12);
    --sidebar-divider:         #DEE2E6;
    --sidebar-transition:      0.22s cubic-bezier(0.4, 0, 0.2, 1);

    /* Tipografia */
    --font-base: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --font-size-base: 14px;
    --line-height-base: 1.5;

    /* ===== SISTEMA DE TIERS RESPONSIVOS (globais) =====
     *
     * 5 faixas baseadas no viewport. Cada @media abaixo sobrescreve
     * APENAS o que muda — o resto herda do baseline.
     *
     *   xs  < 640px      celular (drawer mobile)
     *   sm  640-1024px   tablet / janela estreita
     *   md  1024-1500px  notebook 14"-15"
     *   lg  1500-1900px  desktop 22"-24"
     *   xl  > 1900px     27" / 32" / 4K
     *
     * Quando precisar de tamanho fixo num componente novo, prefira
     * USAR estes tokens em vez de inventar valores em rem/px.
     * Pra escala de pagina especifica (ex.: dashboard usa --ag-*),
     * pode-se aliar localmente: --ag-fs-md: var(--sigefc-fs-md).
     */

    /* Baseline: tier xs */
    --sigefc-fs-2xs: 0.625rem;     /* 10px — tags, labels micro */
    --sigefc-fs-xs:  0.6875rem;    /* 11px — sub-textos */
    --sigefc-fs-sm:  0.75rem;      /* 12px — texto auxiliar */
    --sigefc-fs-md:  0.8125rem;    /* 13px — corpo padrao */
    --sigefc-fs-lg:  0.9375rem;    /* 15px — titulo de card / h3 */
    --sigefc-fs-xl:  1rem;         /* 16px — h2 / destaque medio */
    --sigefc-fs-2xl: 1.125rem;     /* 18px — h1 / valor de destaque */

    --sigefc-sp-1: 0.25rem;        /* 4px  */
    --sigefc-sp-2: 0.50rem;        /* 8px  */
    --sigefc-sp-3: 0.75rem;        /* 12px */
    --sigefc-sp-4: 1.00rem;        /* 16px */
    --sigefc-sp-5: 1.25rem;        /* 20px */

    --sigefc-icon-sm: 1.5rem;      /* 24px */
    --sigefc-icon-md: 2.25rem;     /* 36px */
    --sigefc-icon-lg: 3.00rem;     /* 48px */

    /* Sombras / radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(23, 53, 87, 0.05);
    --shadow-md: 0 4px 12px rgba(23, 53, 87, 0.08);
    --shadow-lg: 0 12px 32px rgba(23, 53, 87, 0.12);

    /* Z-index — hierarquia (mesma do SION) */
    --z-sidebar:       1100;
    --z-modal-1-back:  1150;
    --z-modal-1:       1200;
    --z-modal-2-back:  1240;
    --z-modal-2:       1250;
    --z-modal-3-back:  1290;
    --z-modal-3:       1300;
    --z-modal-4-back:  1340;
    --z-modal-4:       1350;
    --z-modal-5-back:  1390;
    --z-modal-5:       1400;
    --z-loading:       9999;
}

/* Topbar mais compacta em mobile (libera espaço vertical) */
@media (max-width: 640px) {
    :root { --topbar-height: 56px; }
}

/* ===== TIERS RESPONSIVOS — overrides por faixa de viewport ===== */

/* sm — tablet / janela estreita */
@media (min-width: 640px) {
    :root {
        --sigefc-fs-2xs: 0.6875rem;    /* 11px   */
        --sigefc-fs-xs:  0.71875rem;   /* 11.5px */
        --sigefc-fs-sm:  0.78125rem;   /* 12.5px */
        --sigefc-fs-md:  0.84375rem;   /* 13.5px */
        --sigefc-fs-lg:  0.96875rem;   /* 15.5px */
        --sigefc-fs-xl:  1.0625rem;    /* 17px   */
        --sigefc-fs-2xl: 1.25rem;      /* 20px   */

        --sigefc-sp-2: 0.5625rem;      /* 9px  */
        --sigefc-sp-3: 0.8125rem;      /* 13px */
        --sigefc-sp-4: 1.125rem;       /* 18px */
        --sigefc-sp-5: 1.375rem;       /* 22px */

        --sigefc-icon-md: 2.375rem;    /* 38px */
        --sigefc-icon-lg: 3.125rem;    /* 50px */
    }
}

/* md — notebook 14"-15" */
@media (min-width: 1024px) {
    :root {
        --sigefc-fs-2xs: 0.6875rem;    /* 11px */
        --sigefc-fs-xs:  0.75rem;      /* 12px */
        --sigefc-fs-sm:  0.8125rem;    /* 13px */
        --sigefc-fs-md:  0.875rem;     /* 14px */
        --sigefc-fs-lg:  1rem;         /* 16px */
        --sigefc-fs-xl:  1.125rem;     /* 18px */
        --sigefc-fs-2xl: 1.375rem;     /* 22px */

        --sigefc-sp-2: 0.625rem;       /* 10px */
        --sigefc-sp-3: 0.875rem;       /* 14px */
        --sigefc-sp-4: 1.25rem;        /* 20px */
        --sigefc-sp-5: 1.5rem;         /* 24px */

        --sigefc-icon-md: 2.5rem;      /* 40px */
        --sigefc-icon-lg: 3.25rem;     /* 52px */
    }
}

/* lg — desktop 22"-24" */
@media (min-width: 1500px) {
    :root {
        --sigefc-fs-2xs: 0.75rem;      /* 12px   */
        --sigefc-fs-xs:  0.78125rem;   /* 12.5px */
        --sigefc-fs-sm:  0.84375rem;   /* 13.5px */
        --sigefc-fs-md:  0.90625rem;   /* 14.5px */
        --sigefc-fs-lg:  1.0625rem;    /* 17px   */
        --sigefc-fs-xl:  1.1875rem;    /* 19px   */
        --sigefc-fs-2xl: 1.5rem;       /* 24px   */

        --sigefc-sp-2: 0.6875rem;      /* 11px */
        --sigefc-sp-3: 0.9375rem;      /* 15px */
        --sigefc-sp-4: 1.375rem;       /* 22px */
        --sigefc-sp-5: 1.625rem;       /* 26px */

        --sigefc-icon-md: 2.625rem;    /* 42px */
        --sigefc-icon-lg: 3.5rem;      /* 56px */
    }
}

/* xl — 27" / 32" / 4K */
@media (min-width: 1900px) {
    :root {
        --sigefc-fs-2xs: 0.8125rem;    /* 13px */
        --sigefc-fs-xs:  0.8125rem;    /* 13px */
        --sigefc-fs-sm:  0.875rem;     /* 14px */
        --sigefc-fs-md:  0.9375rem;    /* 15px */
        --sigefc-fs-lg:  1.125rem;     /* 18px */
        --sigefc-fs-xl:  1.25rem;      /* 20px */
        --sigefc-fs-2xl: 1.625rem;     /* 26px */

        --sigefc-sp-2: 0.75rem;        /* 12px */
        --sigefc-sp-3: 1rem;           /* 16px */
        --sigefc-sp-4: 1.5rem;         /* 24px */
        --sigefc-sp-5: 1.75rem;        /* 28px */

        --sigefc-icon-md: 2.75rem;     /* 44px */
        --sigefc-icon-lg: 3.75rem;     /* 60px */
    }
}