/* ===================================================================
   UNIVERSAL PRODUCTS — Core Theme & Color Tokens
   Material-Grounded Ultra-Luxury Palette: Espresso Walnut, Linen Bone, Verdant Ink, Foundry Brass
   =================================================================== */

/* ── Premium Font Trio ──────────────────────────────────────────────
   Display  : Cormorant Garamond — ultra-luxury editorial serif
   Body     : Outfit             — crisp modern geometric sans
   Accent   : Space Grotesk      — stylish for prices, specs, mono detail
   ──────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
    /* 4-Token Material Palette */
    --espresso-walnut: #17120E;
    --linen-bone:      #EDE7DA;
    --verdant-ink:     #132E27;
    --foundry-brass:   #C59B51;

    /* Tonal Variations & Metallic Accents */
    --espresso-dark:   #0E0B08;
    --espresso-card:   #211A15;
    --espresso-border: rgba(197, 155, 81, 0.2);
    
    --linen-light:     #F8F5EE;
    --linen-card:      #FFFFFF;
    --linen-border:    rgba(30, 23, 18, 0.14);
    
    --brass-glow:      rgba(197, 155, 81, 0.25);
    --brass-light:     #D9B36E;
    --brass-gradient:  linear-gradient(135deg, #D9B36E 0%, #C59B51 50%, #9E7934 100%);
    --gold-border:     linear-gradient(135deg, rgba(217, 179, 110, 0.4), rgba(197, 155, 81, 0.1), rgba(158, 121, 52, 0.3));
    --verdant-light:   #1C4238;

    /* High-Contrast Luminous Text Tokens */
    --text-on-dark:     #FFFFFF;
    --text-muted-dark:  #E8DEC8;
    --text-dim-dark:    #C4B7A5;

    --text-on-light:    #120E0B;
    --text-muted-light: #3D332A;
    --text-dim-light:   #63564A;

    /* ── Typography — Three-Font Design System ── */
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-accent:  'Space Grotesk', 'DM Mono', monospace;
    /* Legacy alias */
    --font-spec:    var(--font-accent);

    /* ── Type Scale (fluid) ── */
    --text-xs:   clamp(0.65rem,  1.2vw, 0.72rem);
    --text-sm:   clamp(0.78rem,  1.4vw, 0.85rem);
    --text-base: clamp(0.9rem,   1.6vw, 1rem);
    --text-md:   clamp(1rem,     1.8vw, 1.125rem);
    --text-lg:   clamp(1.15rem,  2vw,   1.35rem);
    --text-xl:   clamp(1.4rem,   2.5vw, 1.75rem);
    --text-2xl:  clamp(1.75rem,  3.5vw, 2.5rem);
    --text-3xl:  clamp(2.25rem,  5vw,   3.5rem);
    --text-hero: clamp(3rem,     7vw,   5.75rem);

    /* ── Letter-spacing tokens ── */
    --tracking-tightest: -0.04em;
    --tracking-tight:    -0.02em;
    --tracking-normal:    0em;
    --tracking-wide:      0.06em;
    --tracking-wider:     0.12em;
    --tracking-widest:    0.22em;

    /* ── Line-height tokens ── */
    --leading-none:    1;
    --leading-tight:   1.15;
    --leading-snug:    1.35;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;
    --leading-loose:   1.9;



    /* Spacing & Radii */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   18px;
    --radius-xl:   28px;
    --radius-full: 9999px;

    /* Elevation & Gold Glow */
    --shadow-soft:   0 10px 35px rgba(23, 18, 14, 0.08);
    --shadow-medium: 0 20px 50px rgba(14, 11, 8, 0.35);
    --shadow-brass:  0 12px 35px rgba(197, 155, 81, 0.28);
    --shadow-gold-glow: 0 0 40px rgba(197, 155, 81, 0.18);
    
    /* Transitions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.25s var(--ease-out-expo);
    --transition-base: 0.4s var(--ease-out-expo);
    --transition-slow: 0.7s var(--ease-out-expo);

    /* Layout Dimensions */
    --header-height-desktop: 110px;
    --header-height-mobile: 90px;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    background-color: var(--espresso-walnut);
    color: var(--text-on-dark);
    line-height: var(--leading-normal);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

main {
    flex: 1 0 auto;
}

/* Utility Theme Canvas Classes */
.canvas-dark {
    background-color: var(--espresso-walnut);
    color: var(--text-on-dark);
}

.canvas-light {
    background-color: var(--linen-bone);
    color: var(--text-on-light);
}

/* ── Typography Utility Classes ── */
.font-display {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1, 'onum' 1;
}

.font-body {
    font-family: var(--font-body);
}

.font-accent {
    font-family: var(--font-accent);
    letter-spacing: var(--tracking-wide);
}

/* Legacy alias */
.font-spec {
    font-family: var(--font-accent);
    letter-spacing: var(--tracking-wide);
}

/* ── Global Heading Defaults ── */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 700;
    line-height: var(--leading-snug);
}

p {
    font-family: var(--font-body);
    line-height: var(--leading-relaxed);
    font-weight: 400;
}

/* Links & Buttons reset */
a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
}

button {
    font-family: var(--font-body);
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}