/* ============================================
   MGR JEWELRY - CSS VARIABLES
   Premium Jewelry Agency Design System
   ============================================ */

:root {
    /* ─── Colors ─── */
    --bg-dark: #0a0a0a;
    --bg-secondary: #141414;
    --bg-card: #1a1a1a;
    --bg-hover: #1f1f1f;

    /* Gold Accents */
    --accent-gold: #c9a962;
    --accent-gold-light: #d4af37;
    --accent-gold-dark: #a8893f;
    --accent-gold-glow: rgba(201, 169, 98, 0.3);

    /* Text Colors */
    --text-white: #ffffff;
    --text-light: #f5f5f5;
    --text-muted: #888888;
    --text-dark: #666666;

    /* ─── Typography ─── */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --font-accent: 'Syne', sans-serif;

    /* Font Sizes - Fluid Typography */
    --fs-display: clamp(3.5rem, 8vw, 9rem);
    --fs-h1: clamp(2.5rem, 5vw, 5rem);
    --fs-h2: clamp(2rem, 4vw, 3.5rem);
    --fs-h3: clamp(1.5rem, 3vw, 2rem);
    --fs-h4: clamp(1.25rem, 2vw, 1.5rem);
    --fs-body: clamp(1rem, 1.2vw, 1.125rem);
    --fs-small: clamp(0.875rem, 1vw, 1rem);
    --fs-caption: clamp(0.75rem, 0.9vw, 0.875rem);

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

    /* Letter Spacing */
    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-wide: 0.05em;
    --ls-wider: 0.1em;
    --ls-widest: 0.2em;

    /* Line Heights */
    --lh-tight: 1.1;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;

    /* ─── Spacing ─── */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 5rem;
    --space-3xl: 8rem;
    --space-4xl: 12rem;

    /* ─── Layout ─── */
    --container-width: 1440px;
    --container-padding: clamp(1.5rem, 5vw, 5rem);
    --section-padding: clamp(5rem, 10vh, 10rem);

    /* ─── Borders & Radius ─── */
    --border-thin: 1px solid rgba(255, 255, 255, 0.1);
    --border-gold: 1px solid var(--accent-gold);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* ─── Transitions ─── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --duration-fast: 0.2s;
    --duration-normal: 0.4s;
    --duration-slow: 0.6s;
    --duration-slower: 0.8s;

    /* ─── Z-Index Scale ─── */
    --z-behind: -1;
    --z-base: 1;
    --z-above: 10;
    --z-nav: 100;
    --z-modal: 1000;
    --z-cursor: 9999;

    /* ─── Shadows ─── */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-gold: 0 0 30px var(--accent-gold-glow);
}