/* ═══════════════════════════════════════════════════════════════════
   MLS + MONOLITH BRAND SYSTEM - CSS VARIABLES
   Complete color palette, typography, and design tokens
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     MLS × KHADANE™ OFFICIAL BRAND PALETTE (v1.0 — 2026-04-14)
     Source of truth: 03-Colour-Palette/brand-colours.json
     Rules: Dark bg = Tobacco (never #000). Light bg = Cream (never #FFF).
            Endorsement line = Slate Grey (never Gold).
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  --quarry-gold: #B8962E;        /* Primary accent */
  --tobacco: #4A3520;            /* Primary dark background */
  --tobacco-deep: #3A2A18;       /* Deeper dark for gradients */
  --sandstone-cream: #EEEBE0;    /* Primary light background */
  --slate-grey: #999690;         /* Bylines, endorsement, supporting copy */
  --bracket-gold: #C8A84B;       /* Corner brackets, frame lines */
  --rust-earth: #7A5038;         /* MLS base bars on cream */
  --deep-brown: #1A1410;         /* Body text on cream backgrounds */
  --buff-sand: #C8B48A;          /* Stone colour reference */


  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     MOHAN LAL & SONS COLOR PALETTE (Heritage/Warm) — legacy
     Usage: Homepage, about page, non-stone divisions, footer
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  
  --mls-heritage-brown: #3E2723;      /* Primary brand color */
  --mls-parchment-cream: #F5F1E8;     /* Backgrounds, contrast */
  --mls-estate-grey: #6D6D6D;         /* Body text */
  --mls-dynasty-tan: #C4A57B;         /* Accents, borders */
  --mls-legacy-gold: #B8860B;         /* CTAs, highlights */
  
  
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     MONOLITH COLOR PALETTE (Geological/Bold)
     Usage: Sandstone page, stone gallery, export sections
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  
  --monolith-black: #0A0A0A;          /* Primary backgrounds */
  --quarry-stone: #E6DDD1;            /* Primary text, stone swatches */
  --fossil-grey: #B8AFA1;             /* Secondary text */
  --strata-charcoal: #3D3D3D;         /* Panels, cards */
  --sandstone-gold: #D4AF37;          /* CTAs, premium accents */
  --iron-oxide: #A0522D;              /* Teakwood/warm stone accents */
  
  
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TYPOGRAPHY - FONT FAMILIES
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  
  /* MLS Heritage Fonts */
  --font-mls-display: 'Playfair Display', Georgia, serif;     /* Headlines */
  --font-mls-body: 'Cormorant Garamond', Georgia, serif;      /* Body text */
  --font-mls-mono: 'DM Mono', 'Courier New', monospace;       /* Specs, dates */
  
  /* MONOLITH Modern Fonts */
  --font-monolith-display: 'Antonio', 'Arial Narrow', sans-serif;  /* Headlines */
  --font-monolith-subhead: 'Space Mono', monospace;                /* Subheads */
  --font-monolith-body: 'DM Mono', 'Courier New', monospace;       /* Body, specs */
  
  
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TYPOGRAPHY - FONT SIZES (Mobile-First, Fluid Scaling)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);      /* 12-14px */
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);        /* 14-16px */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);      /* 16-18px */
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);        /* 18-24px */
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);       /* 20-28px */
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);          /* 24-36px */
  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);       /* 30-48px */
  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);      /* 36-60px */
  --text-5xl: clamp(3rem, 2.25rem + 3.75vw, 5rem);           /* 48-80px */
  --text-6xl: clamp(3.75rem, 2.75rem + 5vw, 6.5rem);         /* 60-104px */
  
  
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     SPACING SYSTEM (Based on 8px grid)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  
  --space-1: 0.5rem;      /* 8px */
  --space-2: 1rem;        /* 16px */
  --space-3: 1.5rem;      /* 24px */
  --space-4: 2rem;        /* 32px */
  --space-6: 3rem;        /* 48px */
  --space-8: 4rem;        /* 64px */
  --space-12: 6rem;       /* 96px */
  --space-16: 8rem;       /* 128px */
  --space-20: 10rem;      /* 160px */
  --space-24: 12rem;      /* 192px */
  
  
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     LAYOUT & CONTAINER WIDTHS
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  
  --content-narrow: 65ch;       /* Optimal reading width */
  --content-wide: 85ch;
  
  
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     SHADOWS & DEPTH
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* MONOLITH-specific gold shadows */
  --shadow-gold: 0 10px 30px -5px rgba(212, 175, 55, 0.3);
  --shadow-gold-lg: 0 25px 50px -12px rgba(212, 175, 55, 0.4);
  
  
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     BORDERS & RADIUS
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  
  --radius-sm: 0.125rem;    /* 2px */
  --radius-md: 0.25rem;     /* 4px */
  --radius-lg: 0.5rem;      /* 8px */
  --radius-xl: 1rem;        /* 16px */
  --radius-full: 9999px;    /* Pill shape */
  
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-width-heavy: 3px;
  
  
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TRANSITIONS & ANIMATIONS
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  
  
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Z-INDEX LAYERS
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-fixed: 1200;
  --z-modal-backdrop: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-tooltip: 1600;
  
}


/* ═══════════════════════════════════════════════════════════════════
   UTILITY CLASSES - MLS BRAND
   ═══════════════════════════════════════════════════════════════════ */

/* Background Colors */
.bg-mls-heritage { background-color: var(--mls-heritage-brown); }
.bg-mls-cream { background-color: var(--mls-parchment-cream); }
.bg-mls-gold { background-color: var(--mls-legacy-gold); }

/* Text Colors */
.text-mls-heritage { color: var(--mls-heritage-brown); }
.text-mls-grey { color: var(--mls-estate-grey); }
.text-mls-gold { color: var(--mls-legacy-gold); }

/* Typography */
.font-mls-display { font-family: var(--font-mls-display); }
.font-mls-body { font-family: var(--font-mls-body); }


/* ═══════════════════════════════════════════════════════════════════
   UTILITY CLASSES - MONOLITH BRAND
   ═══════════════════════════════════════════════════════════════════ */

/* Background Colors */
.bg-monolith-black { background-color: var(--monolith-black); }
.bg-quarry-stone { background-color: var(--quarry-stone); }
.bg-sandstone-gold { background-color: var(--sandstone-gold); }
.bg-strata-charcoal { background-color: var(--strata-charcoal); }

/* Text Colors */
.text-monolith-black { color: var(--monolith-black); }
.text-quarry-stone { color: var(--quarry-stone); }
.text-sandstone-gold { color: var(--sandstone-gold); }
.text-fossil-grey { color: var(--fossil-grey); }

/* Typography */
.font-monolith-display { font-family: var(--font-monolith-display); }
.font-monolith-subhead { font-family: var(--font-monolith-subhead); }
.font-monolith-body { font-family: var(--font-monolith-body); }


/* ═══════════════════════════════════════════════════════════════════
   COMPONENT PATTERNS
   ═══════════════════════════════════════════════════════════════════ */

/* MLS Section */
.mls-section {
  background: var(--mls-parchment-cream);
  color: var(--mls-heritage-brown);
  padding: var(--space-16) var(--space-4);
}

/* MONOLITH Section */
.monolith-section,
.khadane-section {
  background: var(--monolith-black);
  color: var(--quarry-stone);
  padding: var(--space-16) var(--space-4);
}

/* MLS Card */
.mls-card {
  background: white;
  border: var(--border-width) solid var(--mls-dynasty-tan);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: all var(--transition-base);
}

.mls-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--mls-legacy-gold);
}

/* MONOLITH Card */
.monolith-card,
.khadane-card {
  background: var(--strata-charcoal);
  border: var(--border-width) solid var(--sandstone-gold);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: all var(--transition-base);
}

.monolith-card:hover,
.khadane-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold);
  border-color: var(--sandstone-gold);
}

/* Button - MLS Style */
.btn-mls {
  background: var(--mls-legacy-gold);
  color: white;
  font-family: var(--font-mls-body);
  font-weight: 600;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-mls:hover {
  background: var(--mls-heritage-brown);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Button - MONOLITH Style */
.btn-monolith {
  background: var(--sandstone-gold);
  color: var(--monolith-black);
  font-family: var(--font-monolith-subhead);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  border: var(--border-width-thick) solid var(--sandstone-gold);
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-monolith:hover {
  background: transparent;
  color: var(--sandstone-gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE HIERARCHY — MLS × KHADANE™ BRAND STANDARDS
   Parent brand: Mohan Lal & Sons (Cormorant Garamond Bold 700)
   Verb connector: "curates" (Cormorant Garamond Italic 300, Slate Grey)
   Endorsed brand: KHADANE™ (Montserrat Black 900, KHA gold / DANE cream)
   Endorsement line: "by Mohan Lal & Sons · Since 1972" — always Slate Grey
   ═══════════════════════════════════════════════════════════════════ */

/* Page themes */
.page-theme-dark {
  background: var(--tobacco);
  color: var(--sandstone-cream);
}
.page-theme-light {
  background: var(--sandstone-cream);
  color: var(--deep-brown);
}

/* Gold 3px top rule (hero/page marker) */
.gold-top-rule {
  height: 3px;
  background: var(--quarry-gold);
}

/* Parent wordmark "Mohan Lal & Sons" */
.mls-wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sandstone-cream);
}
.page-theme-light .mls-wordmark,
.mls-wordmark.on-light { color: var(--deep-brown); }

/* "curates" verb connector */
.mls-curates {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  color: var(--slate-grey);
  letter-spacing: 0.02em;
}

/* KHADANE™ lockup — two-tone, Montserrat Black */
.khadane-lockup {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.khadane-lockup .kha { color: var(--quarry-gold); }
.khadane-lockup .dane { color: var(--sandstone-cream); }
.khadane-lockup .tm {
  font-size: 0.3em;
  vertical-align: super;
  color: var(--sandstone-cream);
}
.page-theme-light .khadane-lockup .dane,
.khadane-lockup.on-light .dane { color: var(--deep-brown); }
.page-theme-light .khadane-lockup .tm,
.khadane-lockup.on-light .tm { color: var(--deep-brown); }

/* Endorsement line — NEVER Gold, always Slate Grey */
.mls-endorsement {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-style: normal;
  color: var(--slate-grey);
  letter-spacing: 0.15em;
  font-size: 0.75em;
}

/* Corner-bracket frame (KHADANE bracket card) */
.khadane-bracket-card {
  position: relative;
  background: var(--tobacco);
  color: var(--sandstone-cream);
  padding: 2rem;
}
.khadane-bracket-card::before,
.khadane-bracket-card::after,
.khadane-bracket-card > .br-bl::before,
.khadane-bracket-card > .br-bl::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--bracket-gold);
  border-style: solid;
}
.khadane-bracket-card::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.khadane-bracket-card::after  { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.khadane-bracket-card > .br-bl::before { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; }
.khadane-bracket-card > .br-bl::after  { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }


/* ═══════════════════════════════════════════════════════════════════
   FONT IMPORT (Google Fonts)
   Add this to your HTML <head> or at the top of your main CSS
   ═══════════════════════════════════════════════════════════════════ */

/*
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Cormorant+Garamond:wght@300;400;600&family=Antonio:wght@100;400;700&family=Space+Mono:wght@400;700&family=DM+Mono:wght@300;400;500&display=swap');
*/