/* Sri Balaji Jewellers & Gems — Design System Tokens */
/* Directions:
   1: Deccan Heirloom (Default)
   2: The Gem Cabinet
   3: Bazaar Ledger
   4: Modern Mangalsutra
   5: Silver & Stone Atelier
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,400&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* Direction 1: Deccan Heirloom (Production System) */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  
  --color-brand-950: #250817;
  --color-brand-900: #300c1e;
  --color-brand-800: #3A1025; /* Primary Mulberry */
  --color-brand-700: #551c37;
  --color-brand-600: #6F294A;
  --color-gold-700: #8E6426; /* Accessible Gold text */
  --color-gold-500: #B98A3E; /* Muted Antique Gold borders & accents */
  --color-gold-400: #cca35c;
  --color-gold-200: #E8D3A7;
  --color-gold-100: #f5ebd3;
  --color-sand-100: #F7F0E4;
  --color-sand-200: #f2e9db;
  --color-sand-300: #EEE5D5;
  --color-canvas: #FFFDF8; /* Warm Ivory Canvas */
  --color-surface: #FFFFFF;
  --color-surface-subtle: #FAF6EE;
  --color-ink: #201A18; /* Deep ink text */
  --color-ink-secondary: #423834;
  --color-muted: #655B56;
  --color-line: #D9CEBD; /* Subtle border */
  --color-line-light: #ece4d7;
  --color-success: #1F6257;
  --color-success-bg: #EAF3F1;
  --color-error: #A32626;
  --color-error-bg: #FDF0F0;
  --color-focus: #1F6257;

  /* Typography scale */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 2.5vw, 2.25rem);
  --text-3xl: clamp(2rem, 3.8vw, 3.25rem);
  --text-display: clamp(2.25rem, 5.2vw, 4.75rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --space-10: 9rem;

  /* Containers & Dimensions */
  --container: min(100% - 2.5rem, 76rem);
  --container-wide: min(100% - 2.5rem, 88rem);
  --container-narrow: min(100% - 2.5rem, 52rem);

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(37, 8, 23, 0.04);
  --shadow-card: 0 8px 24px rgba(37, 8, 23, 0.06);
  --shadow-float: 0 16px 40px rgba(37, 8, 23, 0.12);

  /* Transitions */
  --transition-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ====================================================
   Direction 2 — The Gem Cabinet
   Obsidian, porcelain, brass, ruby, DM Serif Display + DM Sans
==================================================== */
[data-theme="gem-cabinet"] {
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  
  --color-brand-950: #0D0C0C;
  --color-brand-900: #121110;
  --color-brand-800: #151413;
  --color-brand-700: #23201E;
  --color-brand-600: #8E1D39; /* Ruby accent */
  --color-gold-700: #A8833C;
  --color-gold-500: #C6A15B; /* Brass */
  --color-gold-400: #D8B775;
  --color-gold-200: #EAD8B2;
  --color-gold-100: #F6EEDC;
  --color-sand-100: #F3EFE7;
  --color-sand-200: #EBE5DA;
  --color-sand-300: #DFD7C9;
  --color-canvas: #151413;
  --color-surface: #1E1D1B;
  --color-surface-subtle: #272522;
  --color-ink: #F8F5EF; /* Porcelain text */
  --color-ink-secondary: #D4CEBF;
  --color-muted: #A9A39A;
  --color-line: #3A3632;
  --color-line-light: #2A2724;
  --color-success: #3E8A74;
  --color-success-bg: #142A23;
  --color-error: #D04848;
  --color-error-bg: #2B1515;
  --color-focus: #C6A15B;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 18px 50px rgba(0, 0, 0, 0.6);
}

/* ====================================================
   Direction 3 — Bazaar Ledger
   Cream, ink, marigold, vermilion, Fraunces + IBM Plex Sans
==================================================== */
[data-theme="bazaar-ledger"] {
  --font-display: 'Fraunces', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  
  --color-brand-950: #0E1715;
  --color-brand-900: #121F1C;
  --color-brand-800: #15221F;
  --color-brand-700: #1F332E;
  --color-brand-600: #52755C; /* Ledger Green */
  --color-gold-700: #AA6B08;
  --color-gold-500: #D78B12; /* Marigold */
  --color-gold-400: #E6A135;
  --color-gold-200: #F6D69F;
  --color-gold-100: #FBF0DD;
  --color-sand-100: #FAF5ED;
  --color-sand-200: #F3EBDD;
  --color-sand-300: #E9DECD;
  --color-canvas: #F7F1E7;
  --color-surface: #FFFFFF;
  --color-surface-subtle: #F3ECE0;
  --color-ink: #15221F;
  --color-ink-secondary: #314440;
  --color-muted: #647571;
  --color-line: #D9CDBB;
  --color-line-light: #EBE1D2;
  --color-success: #52755C;
  --color-success-bg: #EEF4F0;
  --color-error: #AA3828;
  --color-error-bg: #FAEEEE;
  --color-focus: #D78B12;
}

/* ====================================================
   Direction 4 — Modern Mangalsutra
   Rose clay, shell, cocoa, champagne, Lora + Plus Jakarta Sans
==================================================== */
[data-theme="modern-mangalsutra"] {
  --font-display: 'Lora', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  
  --color-brand-950: #291B19;
  --color-brand-900: #33211E;
  --color-brand-800: #3B2825;
  --color-brand-700: #5C3D38;
  --color-brand-600: #B97162; /* Rose clay */
  --color-gold-700: #AB884B;
  --color-gold-500: #D6B06D; /* Champagne */
  --color-gold-400: #E2C48E;
  --color-gold-200: #F2E3C6;
  --color-gold-100: #FBF4E8;
  --color-sand-100: #FAF3EC;
  --color-sand-200: #F4E7DC;
  --color-sand-300: #ECD9CC;
  --color-canvas: #FFF9F2;
  --color-surface: #FFFFFF;
  --color-surface-subtle: #FAF2EB;
  --color-ink: #3B2825;
  --color-ink-secondary: #573E3A;
  --color-muted: #7E6B67;
  --color-line: #E8D5CA;
  --color-line-light: #F2E7E0;
  --color-success: #70816C;
  --color-success-bg: #F1F5F0;
  --color-error: #B53F3F;
  --color-error-bg: #FDF2F2;
  --color-focus: #B97162;
  
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
}

/* ====================================================
   Direction 5 — Silver & Stone Atelier
   Mineral slate, moonstone, sterling, Libre Baskerville + Inter
==================================================== */
[data-theme="silver-stone"] {
  --font-display: 'Libre Baskerville', serif;
  --font-body: 'Inter', sans-serif;
  
  --color-brand-950: #192028;
  --color-brand-900: #1E2730;
  --color-brand-800: #25303B;
  --color-brand-700: #364452;
  --color-brand-600: #5C455A; /* Smoky plum */
  --color-gold-700: #9E8040;
  --color-gold-500: #C2A15B;
  --color-gold-400: #D2B77B;
  --color-gold-200: #E8DAB9;
  --color-gold-100: #F5EFE0;
  --color-sand-100: #F2F4F5;
  --color-sand-200: #E7EAEC; /* Moonstone */
  --color-sand-300: #D9DFE2;
  --color-canvas: #F8F8F6;
  --color-surface: #FFFFFF;
  --color-surface-subtle: #EEF1F2;
  --color-ink: #25303B;
  --color-ink-secondary: #3D4C5B;
  --color-muted: #6C7A87;
  --color-line: #CCD4D9;
  --color-line-light: #E1E6E9;
  --color-success: #2A685B;
  --color-success-bg: #E8F2EF;
  --color-error: #A62D2D;
  --color-error-bg: #FAEEEE;
  --color-focus: #5C455A;
}