:root {
    /* ── BRAND COLORS ── */
    --primary: #6F4E37;
    --primary-dark: #5a3d28;
    --secondary: #A67B5B;
    --accent: #FFD700;

    /* ── BASE COLORS ── */
    --bg: #FDF8F5;
    --white: #FFFFFF;
    --text: #2D2424;
    --muted: #8A7F78;

    /* ── TEXT VARIANTS ── */
    --text-soft: #888888;
    --text-muted: #666666;

    /* ── BORDER & SURFACE ── */
    --border-soft: #F0E8E0;
    --border-light: #E0E0E0;
    --surface-soft: #F9F9F9;

    /* ── STATUS COLORS ── */
    --success-bg: #E8F5E9;
    --success-text: #2E7D32;

    --danger-bg: #FFEBEE;
    --danger-text: #C62828;
    --danger: #C62828;

    /* ── SOCIAL COLORS ── */
    --wa-bg: #E8F5E9;
    --wa-text: #2E7D32;

    --ig-bg: #FCE4EC;
    --ig-text: #AD1457;

    --mail-bg: #E3F2FD;
    --mail-text: #1565C0;

    --phone-bg: rgba(111, 78, 55, 0.1);

    /* ── GRADIENTS ── */
    --grad-hero: linear-gradient(145deg, #3D1F0A 0%, #6F4E37 50%, #A67B5B 100%);
    --grad-primary: linear-gradient(135deg, var(--primary), var(--secondary));
    --grad-card: linear-gradient(135deg, #f5f0ec 0%, #fae8da 100%);

    /* ── SHADOWS ── */
    --shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.12);
    --shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.05);

    /* ── RADIUS ── */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-round: 50%;

    /* ── TRANSITION ── */
    --transition: all 0.25s ease;

    /* ── FONT ── */
    --font-main: 'DM Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'DM Serif Display', serif;

    /* ── FONT SIZE SCALE ── */
    --text-xs: 0.72rem;
    --text-sm: 0.85rem;
    --text-md: 0.9rem;
    --text-lg: 1.25rem;
    --text-xl: 1.6rem;

    /* ── Z-INDEX ── */
    --z-header: 100;
    --z-floating: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 1000;
}