/* ==========================================================
   SONARIA Design System
   Variables CSS
   ========================================================== */

:root {

    /* ======================================================
       COLORS
       ====================================================== */

    --color-background: #F5F3EF;
    --color-surface: #FFFFFF;

    --color-primary: #0F0F10;
    --color-secondary: #6E6E73;

    --color-accent: #B07A45;
    --color-accent-hover: #9A683A;

    --color-border: #E6E2DB;

    --color-success: #4F7A58;
    --color-warning: #C29A3A;
    --color-error: #B64C4C;

    /* Surface texture */
    --texture-light-opacity: 0.018;
    --texture-dark-opacity: 0.012;
    --texture-size: 4px;


    /* ======================================================
       TYPOGRAPHY
       ====================================================== */

    --font-heading: "Sora", sans-serif;
    --font-body: "Inter", sans-serif;
    --font-logo: "Cormorant Garamond", serif;


    /* Font Sizes */

    --fs-display: 72px;

    --fs-h1: 56px;
    --fs-h2: 40px;
    --fs-h3: 28px;
    --fs-h4: 22px;

    --fs-body-lg: 20px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-caption: 12px;


    /* ======================================================
       FONT WEIGHTS
       ====================================================== */

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


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

    --lh-tight: 1.1;
    --lh-heading: 1.2;
    --lh-body: 1.7;


    /* ======================================================
       SPACING
       8pt Grid System
       ====================================================== */

    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    --space-4xl: 128px;


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

    --container-width: 1200px;
    --container-padding: 32px;

    --navbar-height: 80px;

    --section-spacing: 120px;


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

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;


    /* ======================================================
       SHADOWS
       ====================================================== */

    --shadow-sm: 0 2px 8px rgba(15,15,16,.05);

    --shadow-md: 0 10px 30px rgba(15,15,16,.08);

    --shadow-lg: 0 20px 60px rgba(15,15,16,.12);


    /* ======================================================
       TRANSITIONS
       ====================================================== */

    --transition-fast: 0.2s ease;

    --transition-base: 0.35s ease;

    --transition-slow: 0.6s ease;


    /* ======================================================
       Z INDEX
       ====================================================== */

    --z-navbar: 1000;
    --z-dropdown: 1100;
    --z-modal: 2000;
    --z-overlay: 3000;

}