/* =========================================================
   MC2 DELIVERY
   DESIGN SYSTEM / BASE GLOBAL
   FASE 4 — TOKENS GLOBAIS CONSOLIDADOS
========================================================= */

:root {

    /* =====================================================
       MARCA
    ===================================================== */

    --mc2-primary: #EA1D2C;
    --mc2-primary-hover: #D91827;
    --mc2-primary-dark: #B90F1D;
    --mc2-primary-soft: #FFF3F4;
    --mc2-primary-rgb: 234, 29, 44;


    /* =====================================================
       TEXTO
    ===================================================== */

    --mc2-text: #111827;
    --mc2-text-secondary: #6B7280;
    --mc2-text-soft: #4B5563;
    --mc2-text-muted: #9CA3AF;
    --mc2-text-on-primary: #FFFFFF;


    /* =====================================================
       SUPERFÍCIES
    ===================================================== */

    --mc2-bg: #F9FAFB;
    --mc2-bg-alt: #FAFAFA;
    --mc2-surface: #FFFFFF;
    --mc2-surface-soft: #F3F4F6;


    /* =====================================================
       BORDAS
    ===================================================== */

    --mc2-border: #E5E7EB;
    --mc2-border-strong: #D1D5DB;
    --mc2-border-soft: #EEF0F3;


    /* =====================================================
       ESTADOS
    ===================================================== */

    --mc2-success: #047857;
    --mc2-success-hover: #065F46;
    --mc2-success-soft: #ECFDF5;
    --mc2-success-border: #A7F3D0;
    --mc2-success-rgb: 4, 120, 87;

    --mc2-info: #EA1D2C;
    --mc2-info-hover: #D91827;
    --mc2-info-soft: #EA1D2C;
    --mc2-info-border: #D91827;
    --mc2-info-rgb: 37, 99, 235;

    --mc2-warning: #B45309;
    --mc2-warning-strong: #92400E;
    --mc2-warning-soft: #FFFBEB;
    --mc2-warning-border: #FDE68A;
    --mc2-warning-rgb: 180, 83, 9;

    --mc2-danger: #B91C1C;
    --mc2-danger-hover: #991B1B;
    --mc2-danger-soft: #FEF2F2;
    --mc2-danger-border: #FECACA;
    --mc2-danger-rgb: 185, 28, 28;


    /* =====================================================
       RAIOS
    ===================================================== */

    --mc2-radius-sm: 8px;
    --mc2-radius-md: 12px;
    --mc2-radius-lg: 16px;
    --mc2-radius-xl: 18px;
    --mc2-radius-pill: 999px;


    /* =====================================================
       SOMBRAS
    ===================================================== */

    --mc2-shadow-sm:
        0 2px 8px rgba(15, 23, 42, .06);

    --mc2-shadow-md:
        0 6px 20px rgba(15, 23, 42, .08);

    --mc2-shadow-lg:
        0 10px 28px rgba(15, 23, 42, .12);


    /* =====================================================
       LAYOUT
    ===================================================== */

    --mc2-container: 1320px;
    --mc2-content-narrow: 1200px;
    --mc2-content-compact: 980px;


    /* =====================================================
       ALIASES LEGADOS
       Mantêm o CSS existente funcionando durante a migração.
    ===================================================== */

    --primary: var(--mc2-primary);
    --primary-dark: var(--mc2-primary-hover);

    /* Mantido por compatibilidade nesta fase. */
    --secondary: #FF6F00;

    --success: var(--mc2-success);
    --warning: var(--mc2-warning);
    --danger: var(--mc2-danger);

    --background: var(--mc2-bg-alt);
    --white: var(--mc2-surface);

    --text: var(--mc2-text);
    --border: var(--mc2-border);

    --radius: var(--mc2-radius-md);
    --shadow: var(--mc2-shadow-md);
}


/* =========================================================
   RESET BASE
========================================================= */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    min-width: 0;
}

body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: var(--mc2-bg-alt);
    color: var(--mc2-text);
}


a {
    text-decoration: none;
}


img {
    max-width: 100%;
}


/* =========================================================
   CONTAINERS
========================================================= */

/*
   .container mantém a largura histórica para evitar regressão
   em páginas antigas. Novos componentes devem preferir
   .mc2-container ou var(--mc2-container).
*/
.container {
    width: 95%;
    max-width: 1400px;
    margin: auto;
    color: var(--mc2-text);
}

.mc2-container {
    width: min(calc(100% - 48px), var(--mc2-container));
    margin-inline: auto;
}


/* =========================================================
   CLASSES LEGADAS AINDA EM USO
========================================================= */

.ct {
    width: 20%;
    padding: 5px 5px 13px;

    border-radius: var(--mc2-radius-pill);

    background: var(--mc2-primary);
    color: var(--mc2-text-on-primary);
}

.fx {
    position: relative;
    top: 30px;

    width: 80%;
    height: 1px;

    background: var(--mc2-border-strong);
}

.ft {
    color: var(--mc2-text);
}


@media (max-width: 900px) {

    .ct {
        width: 80%;
        padding: 5px 5px 13px;
    }

    .fx {
        width: 20%;
    }
}


@media (max-width: 700px) {

    .mc2-container {
        width: calc(100% - 32px);
    }
}


@media (max-width: 430px) {

    .mc2-container {
        width: calc(100% - 28px);
    }
}