/* ==========================================================
   SERGIO

   File: variables.css
   Version: 1.0

   Purpose:
   Defines the global design tokens used throughout
   the SERGIO digital flagship.

========================================================== */

:root {

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

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

    --color-text-primary: #111111;
    --color-text-secondary: #666666;

    --color-border: rgba(17, 17, 17, 0.08);

    --color-accent: #F3D6E4;

    --color-success: #2E7D32;
    --color-error: #C62828;


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

    /* Font Families */
    
    --font-family-primary: "Circular", sans-serif;
    --font-family-secondary: var(--font-family-primary);


    /* Font Weights */

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;


    /* Font Sizes */

    --font-size-display: 4rem;
    --font-size-h1: 3rem;
    --font-size-h2: 2.25rem;
    --font-size-h3: 1.75rem;

    --font-size-lead: 1.25rem;
    --font-size-base: 1rem;
    --font-size-caption: 0.875rem;
    --font-size-button: 0.875rem;


    /* Line Heights */

    --line-height-tight: 1.1;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.8;


    /* Letter Spacing */

    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;


    /* ======================================================
       SPACING
    ====================================================== */

    --space-4: 0.25rem;
    --space-8: 0.5rem;
    --space-16: 1rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-48: 3rem;
    --space-64: 4rem;
    --space-96: 6rem;
    --space-128: 8rem;
    --space-160: 10rem;
    --space-192: 12rem;
    --space-256: 16rem;


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

    --container-width: 1440px;

    --container-padding: var(--space-24);

    --section-spacing: var(--space-96);

    --header-height: 72px;

    --border-radius: 0;


    /* ======================================================
       BORDERS
    ====================================================== */

    --border-width: 1px;
    --border-style: solid;
    --border-color: var(--color-border);


    /* ======================================================
       MOTION
    ====================================================== */

    --transition-fast: 150ms ease;
    --transition-standard: 300ms ease;
    --transition-slow: 700ms ease;


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

    --z-base: 1;
    --z-header: 100;
    --z-navigation: 150;
    --z-menu: 200;
    --z-overlay: 250;
    --z-modal: 300;
    --z-loader: 999;

}