/* ═══════════════════════════════════════════════
   QUELARK — CSS Custom Properties
   ═══════════════════════════════════════════════ */

:root {
  /* ── Primary ── */
  --quelark-teal:         #35948D;
  --quelark-teal-dark:    #328C84;
  --quelark-teal-light:   #4DB8AF;
  --quelark-teal-bg:      rgba(53, 148, 141, 0.08);

  /* ── Gold System ── */
  --quelark-gold:         #C8AD6D;
  --quelark-gold-dark:    #A38647;
  --quelark-gold-light:   #D4BF8A;
  --quelark-gold-bg:      rgba(200, 173, 109, 0.08);

  /* ── Neutrals ── */
  --quelark-black:        #1C1C1C;
  --quelark-charcoal:     #2A2A2A;
  --quelark-gray-dark:    #4A4A4A;
  --quelark-gray-mid:     #8A8A8A;
  --quelark-gray-light:   #D4D4D4;
  --quelark-cream:        #F5F0E8;
  --quelark-ivory:        #FAF8F4;
  --quelark-white:        #FFFFFF;

  /* ── Semantic ── */
  --quelark-success:      #2D8F5E;
  --quelark-warning:      #D4A439;
  --quelark-error:        #C44D4D;
  --quelark-info:         #35948D;

  /* ── Typography ── */
  --font-heading: 'TeX Gyre Pagella', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Type Scale ── */
  --text-hero:    clamp(2.75rem, 5vw, 4.5rem);
  --text-h1:      clamp(2rem, 3.5vw, 3rem);
  --text-h2:      clamp(1.5rem, 2.5vw, 2.25rem);
  --text-h3:      clamp(1.25rem, 2vw, 1.75rem);
  --text-h4:      clamp(1.1rem, 1.5vw, 1.35rem);
  --text-body:    clamp(0.95rem, 1.1vw, 1.1rem);
  --text-small:   clamp(0.8rem, 0.9vw, 0.9rem);
  --text-label:   clamp(0.7rem, 0.8vw, 0.8rem);

  /* ── Spacing ── */
  --space-xs:     0.5rem;
  --space-sm:     1rem;
  --space-md:     1.5rem;
  --space-lg:     2.5rem;
  --space-xl:     4rem;
  --space-2xl:    6rem;
  --space-3xl:    8rem;

  /* ── Layout ── */
  --content-max:    1200px;
  --content-narrow: 800px;
  --content-wide:   1400px;

  /* ── Breakpoints (for reference, used via media queries) ── */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:  0 8px 30px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.15);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   600ms ease;

  /* ── Border Radius ── */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  12px;
}