/* ============================================================
   Magnet Mindset — Design Tokens
   Single source of truth for colors, typography, spacing, layout.
   Source: Magnet_Mindset_Brand_Reference.md + MM_Site_Architecture_and_Drive_Plan.md
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     Colors
  ---------------------------------------------------------- */

  /* Primary */
  --color-black:      #000000;   /* Dominant background — 60–70% of any surface */
  --color-gold:       #D4AF37;   /* Primary accent — headlines, CTAs, borders */

  /* Gold scale */
  --color-gold-light: #E8C84A;
  --color-gold-dark:  #B8952A;

  /* Secondary */
  --color-sapphire:   #082567;   /* Section backgrounds, depth, trust signals */
  --color-champagne:  #F7E7CE;   /* Body text on dark, warmth, subtle highlights */
  --color-charcoal:   #2D2D2D;   /* Card backgrounds, secondary surfaces */

  /* Semantic text */
  --color-text-primary:   #F7E7CE;  /* All body copy on dark backgrounds */
  --color-text-secondary: #A89070;  /* Metadata, captions, muted labels */
  --color-text-gold:      #D4AF37;  /* Gold headlines, active labels */

  /* Overlays */
  --overlay-dark-40: rgba(0, 0, 0, 0.40);
  --overlay-dark-60: rgba(0, 0, 0, 0.60);


  /* ----------------------------------------------------------
     Typography — families
  ---------------------------------------------------------- */

  --font-display:  'Playfair Display', Georgia, serif;  /* Hero headlines, section headers */
  --font-product:  'Cinzel', Georgia, serif;             /* Product titles, logo lockups */
  --font-body:     'Lora', Georgia, serif;               /* All body copy, blog, ebooks */
  --font-ui:       'Montserrat', system-ui, sans-serif;  /* Nav, buttons, captions, labels */
  --font-quote:    'Antic Didone', Georgia, serif;        /* Pull quotes, hero overlays */


  /* ----------------------------------------------------------
     Typography — scale (desktop-first, mobile overrides in base.css)
  ---------------------------------------------------------- */

  --text-hero:     clamp(48px, 6vw, 80px);   /* H1 hero */
  --text-h2:       clamp(32px, 4vw, 48px);   /* Section H2 */
  --text-h3:       clamp(22px, 3vw, 32px);   /* Sub H3 */
  --text-body:     clamp(16px, 1.2vw, 18px); /* Body */
  --text-caption:  13px;                      /* Caption / label */
  --text-button:   14px;                      /* Button */
  --text-quote:    clamp(20px, 2vw, 26px);   /* Pull quote */


  /* ----------------------------------------------------------
     Spacing scale
  ---------------------------------------------------------- */

  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;
  --space-xxl: 120px;


  /* ----------------------------------------------------------
     Layout
  ---------------------------------------------------------- */

  --max-width:      1200px;  /* Site container */
  --max-width-text:  720px;  /* Readable text column */

  --border-radius:    4px;
  --border-radius-lg: 8px;


  /* ----------------------------------------------------------
     Motion
  ---------------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;


  /* ----------------------------------------------------------
     Z-index layers
  ---------------------------------------------------------- */

  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-nav:     200;
  --z-modal:   300;

}