/* ==========================================================================
   Zore Concept — Design Tokens
   Shared primitives only. Component-specific values remain with components.
   ========================================================================== */

:root {
    /* Colors */
    --color-primary: #e60000;
    --color-primary-dark: #cc0000;
    --color-text: #111111;
    --color-text-muted: rgba(17, 17, 17, 0.6);
    --color-bg: #ffffff;
    --color-bg-alt: #f9f9f9;
    --color-border-light: rgba(17, 17, 17, 0.08);
    --color-border: rgba(17, 17, 17, 0.15);
    --color-success: #168a53;
    --color-success-soft: rgba(22, 138, 83, 0.14);
    --color-success-border: rgba(109, 224, 163, 0.32);
    --color-error: #d93434;
    --color-error-soft: rgba(217, 52, 52, 0.14);
    --color-error-border: rgba(255, 156, 156, 0.34);

    /* Font family and primitive size scale */
    --font-primary: 'Outfit', sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.75rem;

    /* Semantic type roles */
    --type-heading-sm: clamp(1.75rem, 3vw, 3rem);
    --type-section-title: clamp(2.25rem, 4vw, 3.5rem);
    --type-display: clamp(2.25rem, 5vw, 4.75rem);
    --type-display-xl: clamp(3.5rem, 7vw, 7rem);
    --type-hero-title: 2.75rem;

    /* Leading and tracking */
    --leading-none: 1;
    --leading-tight: 1.08;
    --leading-heading: 1.15;
    --leading-display: 0.96;
    --leading-display-tight: 0.94;
    --leading-body: 1.6;
    --leading-body-compact: 1.55;
    --leading-ui: 1.5;
    --tracking-label: 0.08em;
    --tracking-heading: -0.035em;
    --tracking-display: -0.05em;
    --tracking-title: -0.04em;
    --tracking-button: 0.5px;

    /* Font weights */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Radius scale */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-pill: 40px;
    --radius-full: 50%;

    /* Shared focus treatments */
    --shadow-focus-primary: 0 0 0 3px rgba(230, 0, 0, 0.1);
    --shadow-focus-primary-strong: 0 0 0 3px rgba(230, 0, 0, 0.12);

    /* Motion */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-smooth: 0.4s cubic-bezier(0.76, 0, 0.24, 1);

    /* Layout */
    --container-width: 1400px;
    --page-gutter: var(--space-8);
    --section-space: var(--space-16);
    --section-space-lg: var(--space-20);
    --header-height: 108px;

    /* Layer scale */
    --z-dropdown: 100;
    --z-header: 1000;
    --z-overlay: 1001;
    --z-nav: 1002;
    --z-top: 1003;
    --z-modal: 1023;
}

/*
 * Responsive contracts: 420px / 767px / 991px / 1199px.
 * CSS custom properties cannot be used in media-query conditions without a
 * preprocessing step, so breakpoint values are documented instead of faked
 * as runtime tokens.
 */