/* ─────────────────────────────────────────────
   Deepthi Design System — Typography Tokens
   ───────────────────────────────────────────── */

/* Google Fonts — DM Sans (geometric sans) + Playfair Display (editorial serif) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── Font families ── */
  --font-display:  "Playfair Display", Georgia, serif;
  --font-sans:     "DM Sans", system-ui, sans-serif;
  --font-mono:     "DM Mono", "Courier New", monospace;

  /* ── Type scale (fluid-friendly rems) ── */
  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-md:    1.125rem;   /*  18px */
  --text-lg:    1.25rem;    /*  20px */
  --text-xl:    1.5rem;     /*  24px */
  --text-2xl:   2rem;       /*  32px */
  --text-3xl:   2.5rem;     /*  40px */
  --text-4xl:   3.25rem;    /*  52px */
  --text-5xl:   4.25rem;    /*  68px */
  --text-6xl:   5.5rem;     /*  88px */

  /* ── Font weights ── */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ── Line heights ── */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ── Letter spacing ── */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;

  /* ── Semantic type roles ── */
  --type-hero-font:     var(--font-display);
  --type-hero-size:     var(--text-5xl);
  --type-hero-weight:   var(--weight-bold);
  --type-hero-leading:  var(--leading-tight);

  --type-h1-font:       var(--font-display);
  --type-h1-size:       var(--text-4xl);
  --type-h1-weight:     var(--weight-semibold);

  --type-h2-font:       var(--font-display);
  --type-h2-size:       var(--text-3xl);
  --type-h2-weight:     var(--weight-semibold);

  --type-h3-font:       var(--font-sans);
  --type-h3-size:       var(--text-xl);
  --type-h3-weight:     var(--weight-semibold);

  --type-body-font:     var(--font-sans);
  --type-body-size:     var(--text-base);
  --type-body-weight:   var(--weight-regular);
  --type-body-leading:  var(--leading-normal);

  --type-label-font:    var(--font-sans);
  --type-label-size:    var(--text-sm);
  --type-label-weight:  var(--weight-medium);
  --type-label-tracking: var(--tracking-wide);

  --type-caption-font:   var(--font-sans);
  --type-caption-size:   var(--text-xs);
  --type-caption-weight: var(--weight-regular);
  --type-caption-leading: var(--leading-loose);

  --type-mono-font:     var(--font-mono);
  --type-mono-size:     var(--text-sm);
}