/* ═══════════════════════════════════════════
   VEORA Designs — Design System Tokens
   Quiet Luxury | Warm Gold & Cream
   ═══════════════════════════════════════════ */

:root {
  /* ── Primary Gold Gradient ── */
  --gold-light: #d6b87f;
  --gold-dark: #8B6914;
  --gold-gradient: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  --gold-gradient-h: linear-gradient(90deg, var(--gold-light), var(--gold-dark));
  --gold-shimmer: linear-gradient(
    110deg,
    var(--gold-dark) 0%,
    var(--gold-light) 45%,
    #F5E6A3 50%,
    var(--gold-light) 55%,
    var(--gold-dark) 100%
  );
  --gold-subtle: rgba(214, 184, 127, 0.08);
  --gold-glow: rgba(214, 184, 127, 0.25);
  --gold-border: rgba(214, 184, 127, 0.3);

  /* ── Warm Dark ── */
  --dark-primary: #36240c;
  --dark-secondary: #4a3416;
  --dark-muted: #5e431e;

  /* ── Cream / Light Backgrounds ── */
  --bg-white: #FDFBF7;
  --bg-cream: #F5F0E8;
  --bg-cream-dark: #EDE5D8;
  --bg-overlay: rgba(43, 31, 23, 0.6);
  --bg-overlay-heavy: rgba(43, 31, 23, 0.85);

  /* ── Text Colors ── */
  --text-primary: #36240c;
  --text-secondary: #5e431e;
  --text-muted: #856f51;
  --text-on-dark: #FDFBF7;
  --text-on-dark-muted: rgba(253, 251, 247, 0.7);

  /* ── Typography ── */
  --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-arabic: 'Cairo', 'Noto Sans Arabic', 'Inter', sans-serif;

  --fs-display: clamp(2.5rem, 5vw, 4.5rem);
  --fs-h1: clamp(2rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-body: clamp(0.95rem, 1.1vw, 1.1rem);
  --fs-small: clamp(0.8rem, 0.9vw, 0.9rem);
  --fs-caption: 0.75rem;

  --lh-heading: 1.2;
  --lh-body: 1.75;

  --ls-wide: 0.25em;
  --ls-wider: 0.4em;
  --ls-normal: 0.02em;

  /* ── Spacing Scale (4px base) ── */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */
  --space-5xl: 8rem;      /* 128px */

  /* ── Section Spacing ── */
  --section-padding: clamp(4rem, 8vw, 8rem);
  --section-padding-sm: clamp(3rem, 6vw, 5rem);

  /* ── Container ── */
  --container-max: 1320px;
  --container-narrow: 900px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);

  /* ── Borders ── */
  --border-thin: 1px solid var(--gold-border);
  --border-gold: 2px solid var(--gold-light);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(43, 31, 23, 0.06);
  --shadow-md: 0 4px 20px rgba(43, 31, 23, 0.08);
  --shadow-lg: 0 8px 40px rgba(43, 31, 23, 0.12);
  --shadow-gold: 0 4px 25px rgba(212, 175, 55, 0.15);
  --shadow-gold-lg: 0 8px 40px rgba(212, 175, 55, 0.2);

  /* ── Transitions ── */
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-smooth);
  --transition-base: 0.4s var(--ease-smooth);
  --transition-slow: 0.6s var(--ease-smooth);
  --transition-slower: 0.8s var(--ease-out-expo);

  /* ── Z-Index Scale ── */
  --z-behind: -1;
  --z-base: 1;
  --z-card: 10;
  --z-navbar: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* ── Blueprint/Sketch Texture ── */
  --blueprint-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 60 0 L 0 0 0 60' fill='none' stroke='%23D4AF37' stroke-width='0.3' opacity='0.07'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='60' height='60' fill='url(%23grid)'/%3E%3C/svg%3E");

  /* ── Diagonal Angle ── */
  --diagonal-angle: 8deg;
  --diagonal-clip: polygon(0 0, 100% 4%, 100% 100%, 0 96%);
  --diagonal-clip-reverse: polygon(0 4%, 100% 0, 100% 96%, 0 100%);

  /* ── Service Number Sizes ── */
  --service-number-size: clamp(5rem, 10vw, 9rem);
}

/* ── Dark section variant tokens ── */
[data-theme="dark"] {
  --bg-section: var(--dark-primary);
  --text-section: var(--text-on-dark);
  --text-section-muted: var(--text-on-dark-muted);
}