/* ============================================================
   css/tokens.css
   Mercenary Beauty — Design Tokens

   WHY THIS FILE EXISTS:
   This is the ONLY place where visual decisions live.
   Every color, font, and spacing value is defined here as a
   CSS custom property (variable). All other CSS files READ
   from these tokens — they never hardcode values directly.

   This means: to rebrand the site, you only edit this file.

   HOW CSS VARIABLES WORK:
   --variable-name: value;        ← define it here
   color: var(--variable-name);   ← use it anywhere in CSS

   NOTE ON NAMING:
   The README defines the canonical token names used here.
   The original concept file used shorthand names (--primary,
   --accent, etc.) which are aliased below so both work.
   ============================================================ */


/* ------------------------------------------------------------
   COLOR TOKENS
   ------------------------------------------------------------ */

:root {

  /* --- Core Brand Palette --- */
  --color-primary:        #7994FF;   /* Periwinkle blue — buttons, accents, CTAs */
  --color-primary-dark:   #5a78e8;   /* Darker blue — hover states */
  --color-primary-light:  #7994ff1f; /* Tinted blue — glow effects */

  --color-accent:         #F597E9;   /* Pink/mauve — secondary accents, eyebrows */
  --color-cta:            #D3F95C;   /* Chartreuse yellow-green — CTA buttons, marquee */

  --color-secondary:      #A28EA7;   /* Mauve — muted labels, card subtitles */

  /* --- Neutral / Background Palette --- */
  --color-cream:          #F0EDE1;   /* Warm off-white — main page background */
  --color-dark:           #1A1A2E;   /* Deep navy — dark sections, nav, footer */
  --color-footer-bg:      #0e0e1e;   /* Slightly darker navy — footer only */
  --color-brown-bg:       #cda689;   /* Brown Background Option */

  /* --- Shorthand Aliases (matches original concept file) ---
     These let us reference tokens using the original names.
     Prefer the --color-* names in new CSS you write.        */
  --primary:    var(--color-primary);
  --accent:     var(--color-accent);
  --cta:        var(--color-cta);
  --cream:      var(--color-cream);
  --mauve:      var(--color-secondary);
  --dark:       var(--color-dark);
}


/* ------------------------------------------------------------
   TYPOGRAPHY TOKENS
   ------------------------------------------------------------ */


:root {
  --font-display:          'Maragsa Display', 'Playfair Display', Georgia, serif;   /* Headlines, founder name, section titles */
  --font-display-weight:   500;                                   /* Display headline weight — reduced from 900 for lighter feel */
  --font-display-tracking: 0.0a5em;                               /* +5% letter-spacing for Maragsa Display */
  --font-alt-header:       'Alt Header', cursive;                /* Alternate script header — Nickainley Normal */
  --font-body:             'Neue Montreal', system-ui, sans-serif;       /* Body copy, nav, labels, UI text — weight 400 */
  --font-body-bold:        'Neue Montreal', system-ui, sans-serif;       /* Bold body text — weight 700 */

  /* --- Font Size Scale ---
     clamp(MIN, PREFERRED, MAX) keeps type fluid across all screen sizes.
     MIN      = floor — never smaller than this (enforced on mobile)
     PREFERRED = scales with viewport width (vw) between breakpoints
     MAX      = ceiling — never larger than this (enforced on wide desktop)

     Approximate breakpoints where scaling begins/ends:
     --text-hero:      scales from ~836px → 1418px screens
     --text-section:   scales from ~400px → 1428px screens
     --text-founder:   scales from ~933px → 1333px screens
     --text-cta-title: scales from ~720px → 1360px screens
     --text-service:   scales from ~900px → 1200px screens
     --text-body:      scales from ~1250px → 2000px screens        */
  --text-hero:       clamp(46px, 5.5vw, 78px);   /* Hero h1 headline */
  --text-section:    clamp(28px, 7vw, 100px);     /* Section h2 titles (phases, selected work) */
  --text-founder:    clamp(28px, 3vw, 40px);      /* Services intro quote, founder bio label */
  --text-cta-title:  clamp(36px, 5vw, 68px);      /* CTA section headline */
  --text-service:    clamp(18px, 2vw, 24px);      /* Service names, phase names/descriptions */
  --text-body:       clamp(25px, 2vw, 40px);      /* Hero subtitle, about-body paragraphs */
  --text-small:      17px;                        /* Footer links, card subtitles */
  --text-label:      11px;                        /* Nav links, section labels, marquee items */
  --text-micro:      9px;                         /* Eyebrow tags, image captions */
}


/* ------------------------------------------------------------
   SPACING TOKENS
   ------------------------------------------------------------ */

:root {
  --nav-height:     72px;   /* Fixed nav bar height — used in hero offset & JS */
  --section-pad:    90px;   /* Vertical padding for standard sections */
  --section-pad-sm: 72px;   /* Vertical padding on tablet breakpoint */
  --page-gutter:    52px;   /* Horizontal padding left/right on desktop */
  --page-gutter-sm: 24px;   /* Horizontal padding on tablet/mobile */
}


/* ------------------------------------------------------------
   MOTION TOKENS
   ------------------------------------------------------------ */

:root {
  --transition-fast:   0.2s ease;
  --transition-base:   0.35s ease;
  --transition-slow:   0.6s ease;
}