/* ==========================================================
   WEB4DEV — SITE PREMIUM PARA ADVOGADOS
   DESIGN TOKENS

   Todas as decisões globais de identidade visual devem
   permanecer centralizadas neste arquivo.
   ========================================================== */

:root {

    /* ======================================================
       CORES — BACKGROUNDS
       ====================================================== */

    --color-bg: #F6F3ED;
    --color-bg-soft: #FBFAF7;

    --color-surface: #FFFFFF;

    --color-surface-dark: #101820;
    --color-surface-navy: #162A3A;


    /* ======================================================
       CORES — TEXTO
       ====================================================== */

    --color-text-primary: #101820;
    --color-text-secondary: #5F666C;

    --color-text-inverse: #F8F7F3;
    --color-text-muted-inverse: rgba(248, 247, 243, 0.72);


    /* ======================================================
       CORES — ACCENT
       ====================================================== */

    --color-accent: #B59A68;
    --color-accent-soft: #D9C9A7;


    /* ======================================================
       WHATSAPP
       Uso exclusivo em elementos relacionados ao WhatsApp.
       ====================================================== */

    --color-whatsapp: #25D366;


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

    --color-border:
        rgba(16, 24, 32, 0.12);

    --color-border-dark:
        rgba(255, 255, 255, 0.12);


    /* ======================================================
       TIPOGRAFIA
       ====================================================== */

    --font-display:
        "Cormorant Garamond",
        Georgia,
        "Times New Roman",
        serif;

    --font-body:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    /* ======================================================
       PESOS
       ====================================================== */

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


    /* ======================================================
       TAMANHOS
       ====================================================== */

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;

    --font-size-base: 1rem;

    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;

    --font-size-h3:
        clamp(1.5rem, 2vw, 2rem);

    --font-size-h2:
        clamp(2.8rem, 4vw, 4.8rem);

    --font-size-display:
        clamp(4rem, 6vw, 7rem);


    /* ======================================================
       LINE HEIGHT
       ====================================================== */

    --line-height-tight: 1;
    --line-height-heading: 1.08;
    --line-height-body: 1.7;


    /* ======================================================
       ESPAÇAMENTOS
       Base de 8px
       ====================================================== */

    --space-1: 0.5rem;   /* 8px */

    --space-2: 1rem;     /* 16px */

    --space-3: 1.5rem;   /* 24px */

    --space-4: 2rem;     /* 32px */

    --space-5: 2.5rem;   /* 40px */

    --space-6: 3rem;     /* 48px */

    --space-8: 4rem;     /* 64px */

    --space-10: 5rem;    /* 80px */

    --space-12: 6rem;    /* 96px */

    --space-15: 7.5rem;  /* 120px */

    --space-20: 10rem;   /* 160px */


    /* ======================================================
       GRID
       ====================================================== */

    --container-max: 1280px;

    --container-padding:
        clamp(1.25rem, 4vw, 3rem);


    /* ======================================================
       BORDER RADIUS
       ====================================================== */

    --radius-sm: 0.5rem;

    --radius-md: 1rem;

    --radius-lg: 1.5rem;

    --radius-pill: 999px;


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

    --shadow-card:
        0 10px 40px rgba(16, 24, 32, 0.06);

    --shadow-card-hover:
        0 20px 50px rgba(16, 24, 32, 0.10);

    --shadow-featured:
        0 24px 70px rgba(16, 24, 32, 0.12);


    /* ======================================================
       TRANSIÇÕES
       ====================================================== */

    --transition-fast:
        180ms ease;

    --transition-base:
        250ms ease;

    --transition-slow:
        600ms cubic-bezier(0.22, 1, 0.36, 1);


    /* ======================================================
       Z-INDEX
       Escala controlada para evitar números arbitrários.
       ====================================================== */

    --z-base: 1;

    --z-content: 10;

    --z-header: 100;

    --z-overlay: 500;

    --z-modal: 1000;
}