/* BabyKoala Hotel Supplies B2B Website — Unified Design System */

:root {
    /* Primary Brand Palette (Unified across all 6 pages) */
    --ix-navy: #101e2c;
    --ix-navy-2: #1a2f42;
    --ix-ink: #16222f;
    --ix-body: #55636f;
    --ix-body-soft: #7c8894;
    --ix-gold: #b3893f;
    --ix-gold-2: #c9a45c;
    --ix-gold-3: #e2cf9f;
    --ix-gold-deep: #8f6a24;
    --ix-line: rgba(16, 30, 44, 0.10);
    --ix-line-2: rgba(16, 30, 44, 0.06);
    --ix-ivory: #faf8f4;
    --ix-ivory-2: #f3efe7;
    --ix-hd-h: 4.25rem;

    /* Aliases for backward compatibility */
    --color-primary: var(--ix-navy);
    --color-secondary: var(--ix-gold);
    --color-accent: var(--ix-navy-2);
    --color-light: var(--ix-ivory);
    --color-white: #ffffff;
    --color-text: var(--ix-ink);
    --color-text-light: var(--ix-body);
    --color-border: var(--ix-line);

    /* Gradients */
    --gradient-gold: linear-gradient(135deg, #c9a45c 0%, #a97f2e 55%, #8f6a24 100%);
    --gradient-blue: linear-gradient(135deg, #1a2f42 0%, #101e2c 100%);

    /* Typography */
    --ix-serif: 'Playfair Display', Georgia, serif;
    --ix-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-primary: var(--ix-sans);
    --font-secondary: var(--ix-serif);
    --font-monospace: 'SF Mono', Monaco, 'Cascadia Mono', monospace;

    /* Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Border Radius (Unified refined luxury geometry) */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px -2px rgba(16, 30, 44, 0.08);
    --shadow-md: 0 12px 28px -12px rgba(16, 30, 44, 0.16);
    --shadow-lg: 0 24px 48px -22px rgba(16, 30, 44, 0.26);
    --shadow-xl: 0 30px 60px -28px rgba(16, 30, 44, 0.36);

    /* Transitions */
    --transition-fast: 160ms ease;
    --transition-base: 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Layout */
    --container-max-width: 1200px;
    --container-padding: 1.5rem;
    --header-height: var(--ix-hd-h);

    /* Z-index layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1050;
}

.text-gold { color: var(--ix-gold); }
.bg-gold { background-color: var(--ix-gold); }
.bg-light { background-color: var(--ix-ivory); }
.border-gold { border-color: var(--ix-gold); }