/* ==========================================================================
   CSS Custom Properties — "Industrial Warmth" Design System
   ========================================================================== */

:root {
    /* --- Colors --- */
    --color-ink:        #1C1C1E;
    --color-paper:      #F5F2EC;
    --color-rust:       #C0522A;
    --color-rust-hover: #A8441F;
    --color-rust-light: #F5E8E2;
    --color-steel:      #4A5568;
    --color-concrete:   #E8E4DC;
    --color-white:      #FFFFFF;
    --color-success:    #2D7D46;
    --color-warning:    #D4A017;
    --color-error:      #C0392B;
    --color-star:       #F5A623;

    /* --- Typography --- */
    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-semi:    'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
    --font-body:    'Source Serif 4', 'Georgia', serif;
    --font-ui:      'Barlow', 'Helvetica Neue', sans-serif;

    /* --- Font sizes (fluid, clamp) --- */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-md:   1.125rem;   /* 18px */
    --text-lg:   1.25rem;    /* 20px */
    --text-xl:   1.5rem;     /* 24px */
    --text-2xl:  clamp(1.5rem, 2vw + 0.5rem, 2rem);     /* 24-32px */
    --text-3xl:  clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem); /* 28-40px */
    --text-4xl:  clamp(2rem, 3vw + 0.5rem, 3rem);         /* 32-48px */
    --text-5xl:  clamp(2.5rem, 4vw + 0.5rem, 3.75rem);    /* 40-60px */

    /* --- Spacing scale --- */
    --space-xs:  0.25rem;  /* 4px */
    --space-sm:  0.5rem;   /* 8px */
    --space-md:  1rem;     /* 16px */
    --space-lg:  1.5rem;   /* 24px */
    --space-xl:  2rem;     /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */
    --space-4xl: 6rem;     /* 96px */

    /* --- Border radius --- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-sm:   0 1px 2px rgba(28, 28, 30, 0.06);
    --shadow-md:   0 2px 8px rgba(28, 28, 30, 0.08);
    --shadow-lg:   0 4px 16px rgba(28, 28, 30, 0.10);
    --shadow-xl:   0 8px 32px rgba(28, 28, 30, 0.12);
    --shadow-card: 0 2px 8px rgba(28, 28, 30, 0.06), 0 0 0 1px rgba(28, 28, 30, 0.04);

    /* --- Transitions --- */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Layout --- */
    --container-max:  1200px;
    --container-wide: 1400px;
    --sidebar-width:  320px;
    --header-height:  72px;

    /* --- Z-index layers --- */
    --z-base:    1;
    --z-sticky:  100;
    --z-overlay: 200;
    --z-modal:   300;
    --z-toast:   400;
}