/* ==========================================================================
   variables.css — Design tokens (SINGLE SOURCE OF TRUTH)
   YCM Finance rebrand. Target look: Stripe / Linear / Mercury / Vercel.
   Change a value here once -> the whole site updates.
   ========================================================================== */

:root {
  /* ---- palette (locked in CLAUDE.md) ---------------------------------- */
  --ink:        #003049; /* navy · headlines, hero bg, primary text */
  --brand:      #0E6476; /* teal · primary buttons, accents, links */
  --brand-glow: #2DD4BF; /* electric teal · highlights, success, glow */
  --text:       #4A6070; /* body text */
  --muted:      #8FA0AD; /* captions, labels */
  --bg:         #FFFFFF;
  --bg-soft:    #F6F9FC; /* alternating sections, cards */
  --border:     #E3E8EE;
  --green:      #00875A; /* profit / positive */
  --red:        #CD3500; /* loss / alert */
  --amber:      #B75D06; /* warning / break-even */

  /* tints derived from the palette (kept subtle) */
  --brand-tint:  rgba(14, 100, 118, 0.08);
  --glow-tint:   rgba(45, 212, 191, 0.12);
  --green-tint:  rgba(0, 135, 90, 0.10);
  --red-tint:    rgba(205, 53, 0, 0.10);
  --amber-tint:  rgba(183, 93, 6, 0.10);
  --ink-overlay: rgba(0, 48, 73, 0.55);

  /* ---- signature gradients ------------------------------------------- */
  --grad-hero:    linear-gradient(135deg, #003049 0%, #0E6476 100%);
  --grad-premium: linear-gradient(135deg, #2DD4BF 0%, #0E6476 55%, #003049 100%);
  --grad-success: linear-gradient(135deg, #00875A 0%, #1BCA84 100%);

  /* ---- type ----------------------------------------------------------- */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* fluid type scale */
  --fs-display: clamp(2.5rem, 1.6rem + 3.8vw, 4rem);   /* hero H1 */
  --fs-h1:      clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --fs-h2:      clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-lede:    clamp(1.05rem, 0.98rem + 0.5vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --tracking-tight: -0.025em; /* H1/H2 premium look */

  /* ---- spacing (multiples of 8px) ------------------------------------ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  96px;
  --sp-9:  128px;
  --section-y: clamp(64px, 5vw + 40px, 128px); /* vertical section rhythm */

  /* ---- radii (only {6,8,10,12,16}) ----------------------------------- */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  10px;
  --r-xl:  12px;
  --r-2xl: 16px;
  --r-pill: 999px;

  /* ---- shadows (soft, premium) --------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 48, 73, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 48, 73, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 48, 73, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 48, 73, 0.12);
  --shadow-glow: 0 8px 32px rgba(45, 212, 191, 0.25);

  /* ---- layout --------------------------------------------------------- */
  --container: 1140px;
  --container-narrow: 820px;
  --nav-h: 68px;

  /* ---- motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 140ms var(--ease);
  --t-med:  240ms var(--ease);
  --t-slow: 480ms var(--ease);

  /* ---- z-index -------------------------------------------------------- */
  --z-nav: 100;
  --z-overlay: 200;
}