/* ========================================
   TBSO Design System - CSS Custom Properties
   ======================================== */

:root {
  /* ========== Colors ========== */

  /* Primary Palette */
  --color-saffron: #D4AF37;
  --color-muted-gold: #C9A84C;
  --color-warm-cream: #FAF6EE;
  --color-ivory: #F5F0E6;
  --color-white: #FFFFFF;

  /* Text Colors */
  --color-earth-brown: #2C1F12;
  --color-deep-walnut: #4A3728;
  --color-clay: #8B6F47;

  /* Accent Colors */
  --color-monk-robe: #C67A2E;
  --color-soft-sage: #A8B89C;

  /* ========== Typography ========== */

  /* Font Families */
  --font-heading: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Lato', 'Helvetica Neue', sans-serif;

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

  /* Font Sizes - Fluid Typography */
  --font-size-small: 0.875rem;      /* 14px */
  --font-size-medium: 1rem;          /* 16px base */
  --font-size-large: 1.25rem;        /* 20px */
  --font-size-xl: 1.75rem;           /* 28px */
  --font-size-xxl: 2.25rem;          /* 36px */
  --font-size-display: clamp(2.5rem, 4vw, 3.5rem); /* 40-56px responsive */

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-base: 1.65;
  --line-height-relaxed: 1.8;
  --line-height-loose: 2.2;

  /* Letter Spacing */
  --letter-spacing-tight: 0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-wider: 0.12em;
  --letter-spacing-widest: 0.25em;

  /* ========== Spacing System ========== */

  /* 8-level Scale */
  --spacing-10: 0.5rem;    /* 8px */
  --spacing-20: 1rem;      /* 16px */
  --spacing-30: 1.5rem;    /* 24px */
  --spacing-40: 2rem;      /* 32px */
  --spacing-50: 3rem;      /* 48px */
  --spacing-60: 4rem;      /* 64px */
  --spacing-70: 5.5rem;    /* 88px */
  --spacing-80: 8rem;      /* 128px */

  /* ========== Layout ========== */

  /* Content Widths */
  --content-width: 1020px;
  --wide-width: 1280px;
  --full-width: 100%;

  /* Container Padding */
  --container-padding: var(--spacing-40);
  --container-padding-mobile: var(--spacing-20);

  /* Section Padding */
  --section-padding-y: var(--spacing-70);
  --section-padding-x: var(--spacing-40);
  --section-padding-y-mobile: var(--spacing-50);
  --section-padding-x-mobile: var(--spacing-20);

  /* ========== Visual Effects ========== */

  /* Borders */
  --border-radius: 4px;
  --border-radius-large: 8px;
  --border-width: 1px;
  --border-width-thick: 3px;

  /* Shadows */
  --shadow-small: 0 2px 8px rgba(44, 31, 18, 0.08);
  --shadow-medium: 0 4px 16px rgba(44, 31, 18, 0.12);
  --shadow-large: 0 8px 32px rgba(44, 31, 18, 0.12);
  --shadow-button: 0 4px 16px rgba(212, 175, 55, 0.3);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.8s ease-out;

  /* Overlays */
  --overlay-light: rgba(44, 31, 18, 0.55);
  --overlay-medium: rgba(44, 31, 18, 0.7);
  --overlay-dark: rgba(44, 31, 18, 0.8);

  /* ========== Z-Index Scale ========== */

  --z-index-base: 1;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-modal: 300;
  --z-index-overlay: 400;
  --z-index-toast: 500;

  /* ========== Breakpoints ========== */
  /* Used in media queries - documented here for reference */
  /* Mobile: 0-640px (default) */
  /* Medium: 641px-1024px */
  /* Large: 1025px+ */
}

/* ========================================
   Responsive Variable Adjustments
   ======================================== */

@media (min-width: 641px) {
  :root {
    --container-padding: var(--spacing-50);
  }
}

@media (min-width: 1025px) {
  :root {
    --container-padding: var(--spacing-60);
  }
}