/* ============================================
   iBridge Design System — Award-Winning 2026
   ============================================ */

:root {
    /* Brand Colors */
    --gold: #c27c40;
    --gold-hover: #a8693a;
    --gold-light: rgba(194, 124, 64, 0.08);
    --gold-glow: rgba(194, 124, 64, 0.25);
    --gold-border: rgba(194, 124, 64, 0.2);

    /* Neutrals */
    --black: #0f1f18;
    --dark: #17342a;
    --dark-2: #1d4035;
    --dark-3: #234d40;
    --text: #111114;
    --text-secondary: #444450;
    --text-muted: #71717a;
    --text-inverse: #f5f5f7;
    --border: #e4e4e8;
    --border-light: #f0f0f2;
    --bg: #ffffff;
    --bg-soft: #f8f8fa;
    --bg-softer: #f2f2f5;
    --bg-dark: #17342a;
    --bg-dark-2: #132b23;
    --bg-dark-3: #1d4035;

    /* Accent */
    --accent-blue: #2563eb;
    --accent-green: #16a34a;
    --accent-red: #dc2626;

    /* Typography */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Font Sizes — fluid, reference: ibridge.kz */
    --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
    --text-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
    --text-base: clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem);
    --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem);
    --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --text-4xl: clamp(2.4rem, 1.6rem + 3.5vw, 4rem);
    --text-5xl: clamp(3rem, 2rem + 5vw, 5.5rem);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --space-5xl: 128px;
    --section-pad: clamp(64px, 8vw, 128px);

    /* Layout */
    --container: 1240px;
    --container-sm: 800px;
    --container-lg: 1400px;
    --header-h: 72px;
    --header-h-mobile: 60px;

    /* Borders & Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.14);
    --shadow-glow: 0 0 40px var(--gold-glow);

    /* Transitions */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --t-fast: 0.15s var(--ease);
    --t-base: 0.3s var(--ease);
    --t-slow: 0.5s var(--ease);
    --t-slower: 0.8s var(--ease-out);

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

/* Dark mode */
[data-theme="dark"] {
    --text: #e8e8ec;
    --text-secondary: #a0a0ac;
    --text-muted: #6a6a76;
    --border: #2c2c32;
    --border-light: #232328;
    --bg: #0d0d0d;
    --bg-soft: #161618;
    --bg-softer: #1e1e22;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
}