/* ==========================================================
   MX-DIG — Cartão Digital Marcia Xavier
   Design System
   Arquivo: variables.css
   ========================================================== */

:root {

    /* ======================================================
       Cores Institucionais
       ====================================================== */

    --color-primary: #021c4a;
    --color-secondary: #814924;
    --color-accent: #413028;
    --color-neutral: #d6c8ba;

    --color-white: #ffffff;
    --color-black: #000000;

    --color-background: #ffffff;
    --color-surface: #f8f8f8;

    --color-text: #2f2f2f;
    --color-text-light: #6b6b6b;

    --color-border: #e4e4e4;


    /* ======================================================
       Tipografia
       ====================================================== */

    --font-primary: "Montserrat", Arial, Helvetica, sans-serif;
    --font-secondary: Georgia, "Times New Roman", serif;


    /* ======================================================
       Pesos
       ====================================================== */

    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;


    /* ======================================================
       Tamanhos
       ====================================================== */

    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 3rem;


    /* ======================================================
       Espaçamentos
       ====================================================== */

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;


    /* ======================================================
       Bordas
       ====================================================== */

    --radius-sm: .25rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --radius-xl: 1rem;
    --radius-pill: 999px;


    /* ======================================================
       Sombras
       ====================================================== */

    --shadow-sm: 0 2px 4px rgba(0,0,0,.08);
    --shadow-md: 0 4px 10px rgba(0,0,0,.10);
    --shadow-lg: 0 8px 20px rgba(0,0,0,.12);


    /* ======================================================
       Transições
       ====================================================== */

    --transition-fast: .2s ease;
    --transition-default: .3s ease;


    /* ======================================================
       Layout
       ====================================================== */

    --container-width: 1200px;

}