/* ============================================
   SETPAN GROUP — Black & Gold Industrial Prestige
   Design Token System v3.0
   ============================================ */

:root {
    /* ── Core Palette ── */
    --brown: #1E170E;
    --brown-dark: #1E170E;
    --brown-mid: #1E170E;
    --gold: #C79A3B;
    --gold-dark: #8C6A2B;
    --ivory: #F6F4EF;
    --warm-white: #FDFCF9;
    --warm-gray: #E8E4DC;

    /* Text — gold default, brown on white sections */
    --text-heading: #C79A3B;
    --text-body: #C79A3B;
    --text-muted: rgba(199, 154, 59, 0.70);
    --text-light: rgba(199, 154, 59, 0.50);
    --text-ivory: #F6F4EF;
    --text-ivory-muted: rgba(246, 244, 239, 0.65);
    --text-gold: #C79A3B;
    --text-gold-muted: rgba(199, 154, 59, 0.85);
    --text-brown: #5E4720;
    --text-brown-muted: rgba(94, 71, 32, 0.70);

    /* Surfaces */
    --bg-ivory: #F6F4EF;
    --bg-white: #FDFCF9;
    --bg-warm: #F2EFE8;
    --bg-brown: #1E170E;
    --bg-brown-dark: #1E170E;
    --bg-brown-mid: #1E170E;
    --bg-tint: rgba(199, 154, 59, 0.05);
    --bg-tint-strong: rgba(199, 154, 59, 0.08);
    --bg-dark: #1E170E;
    --bg-footer: #1E170E;

    /* Borders */
    --border-subtle: rgba(199, 154, 59, 0.12);
    --border-default: rgba(199, 154, 59, 0.20);
    --border-strong: rgba(199, 154, 59, 0.35);
    --border-gold: rgba(199, 154, 59, 0.50);
    --border-ivory: rgba(246, 244, 239, 0.15);
    --border-ivory-strong: rgba(246, 244, 239, 0.30);

    /* Overlays — brown-based */
    --overlay-hero: linear-gradient(160deg, rgba(30, 23, 14, 0.90) 0%, rgba(30, 23, 14, 0.75) 50%, rgba(30, 23, 14, 0.85) 100%);
    --overlay-dark: rgba(30, 23, 14, 0.92);
    --overlay-page-hero: linear-gradient(160deg, rgba(30, 23, 14, 0.92) 0%, rgba(30, 23, 14, 0.85) 100%);
    --overlay-card: linear-gradient(to top, rgba(30, 23, 14, 0.95) 0%, rgba(30, 23, 14, 0.35) 50%, transparent 100%);

    /* Gradients */
    --gradient-gold: linear-gradient(135deg, #C79A3B, #8C6A2B);
    --gradient-gold-soft: linear-gradient(135deg, rgba(199, 154, 59, 0.15), rgba(140, 106, 43, 0.08));
    --gradient-dark: #1E170E;

    /* Glow — premium gold, not neon */
    --glow-heading: 0 0 6px rgba(199, 154, 59, 0.45), 0 0 20px rgba(199, 154, 59, 0.25);
    --glow-subtle: 0 0 4px rgba(199, 154, 59, 0.30);

    /* ── Spacing ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;
    --space-10: 100px;

    /* Section verticals */
    --section-pad: 140px;
    --section-pad-tablet: 100px;
    --section-pad-mobile: 70px;

    /* ── Radii ── */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 50px;

    /* ── Shadows ── */
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.10);
    --shadow-card-hover: 0 24px 60px rgba(199, 154, 59, 0.25);
    --shadow-elevated: 0 32px 80px rgba(0, 0, 0, 0.14);
    --shadow-gold-glow: 0 0 50px rgba(199, 154, 59, 0.18);
    --shadow-btn: 0 8px 30px rgba(199, 154, 59, 0.25);
    --shadow-depth: 0 40px 100px rgba(0, 0, 0, 0.18);

    /* ── Typography ── */
    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* ── Transitions ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition: all 0.4s var(--ease-out);
    --transition-fast: all 0.25s var(--ease-out);
    --transition-slow: all 0.6s var(--ease-out);

    /* ── Z-Index ── */
    --z-base: 1;
    --z-card: 10;
    --z-sticky: 500;
    --z-nav: 1000;
    --z-nav-content: 1001;
    --z-mobile-panel: 2000;
    --z-overlay: 5000;
    --z-lightbox: 9999;

    /* ── Layout ── */
    --container-max: 1280px;
    --container-pad: 24px;
    --grid-min: 340px;
    --content-max: 720px;
}

@media (max-width: 768px) {
    :root {
        --container-pad: 20px;
        --section-pad: var(--section-pad-mobile);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --section-pad: var(--section-pad-tablet);
    }
}