/* ============================================================
   VersaSol · Typography Tokens
   Sans: Satoshi (Fontshare) — wordmark + UI
   Display: Fraunces (Google) — editorial headlines
   Mono: DM Mono (Google) — data, labels, code
   ============================================================ */

/* Satoshi — clean grotesk with character; NOT Inter/Roboto */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,500,400&display=swap');

/* Fraunces — optical-size serif for editorial hero headlines */
/* DM Mono — monospaced for codes, metrics, taglines */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── Font Families ────────────────────────────────────────── */
  --font-sans:    'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:    'DM Mono', 'Courier New', Courier, monospace;

  /* Semantic aliases */
  --font-heading: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-label:   var(--font-sans);
  --font-code:    var(--font-mono);
  --font-data:    var(--font-mono);

  /* ── Scale (px-based, rem delivered) ─────────────────────── */
  --text-2xs:  0.625rem;   /*  10px */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.8125rem;  /*  13px */
  --text-base: 0.875rem;   /*  14px */
  --text-md:   1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  2rem;       /*  32px */
  --text-4xl:  2.5rem;     /*  40px */
  --text-5xl:  3.25rem;    /*  52px */
  --text-6xl:  4rem;       /*  64px */

  /* ── Weights ──────────────────────────────────────────────── */
  --font-regular: 400;
  --font-medium:  500;
  --font-bold:    700;
  --font-black:   900;

  /* ── Line Heights ─────────────────────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* ── Letter Spacing ───────────────────────────────────────── */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-tagline:  0.32em; /* Brand spec: 3.2 for DM Mono taglines */
  --tracking-label:    0.06em; /* Section label caps */

  /* ── Semantic Type Styles ─────────────────────────────────── */
  /* Use these in component styling for consistency */

  /* Hero / Display (Fraunces) */
  --type-hero-size:    var(--text-5xl);
  --type-hero-weight:  var(--font-black);
  --type-hero-leading: var(--leading-tight);
  --type-hero-track:   var(--tracking-tight);

  /* Section headline (Fraunces) */
  --type-headline-size:    var(--text-3xl);
  --type-headline-weight:  var(--font-bold);
  --type-headline-leading: var(--leading-snug);

  /* Subheading (Satoshi) */
  --type-subhead-size:    var(--text-xl);
  --type-subhead-weight:  var(--font-medium);
  --type-subhead-leading: var(--leading-snug);

  /* Body (Satoshi) */
  --type-body-size:    var(--text-base);
  --type-body-weight:  var(--font-regular);
  --type-body-leading: var(--leading-normal);

  /* Label / UI caps (Satoshi) */
  --type-label-size:    var(--text-xs);
  --type-label-weight:  var(--font-medium);
  --type-label-track:   var(--tracking-label);

  /* Tagline (DM Mono) */
  --type-tagline-size:    var(--text-2xs);
  --type-tagline-weight:  var(--font-regular);
  --type-tagline-track:   var(--tracking-tagline);

  /* Data / code (DM Mono) */
  --type-data-size:    var(--text-xs);
  --type-data-weight:  var(--font-regular);
  --type-data-leading: var(--leading-normal);
}