/**
 * SENTRE Theme — Design Tokens
 * Source of truth: tokens.json (exact values, no additions)
 */

:root {

  /* ─── Colors ── tokens.json > colors ─────────────────── */

  /* primary */
  --color-blue: #1f4e78;
  --color-red:  #c8102e;

  /* neutral */
  --color-gray-light:   #F5F5F5;
  --color-gray-lighter: #F8F9FA;
  --color-white:        #ffffff;
  --color-text-main:    #1a1a1a;
  --color-text-muted:   #6c757d;

  /* ─── Typography ── tokens.json > typography ─────────── */

  /* Font family updated to Barlow per project decision */
  --font-sans:    'Barlow', system-ui, -apple-system, sans-serif;
  --font-display: 'Barlow Condensed', 'Barlow', sans-serif;

  /* H1 */
  --text-h1-desktop: 3.5rem;
  --text-h1-mobile:  2.5rem;
  --text-h1-weight:  700;
  --text-h1:         clamp(2.5rem, 4.5vw, 3.5rem); /* fluid version */

  /* H2 */
  --text-h2-desktop: 2.5rem;
  --text-h2-mobile:  2rem;
  --text-h2-weight:  700;
  --text-h2:         clamp(2rem, 3.5vw, 2.5rem);   /* fluid version */

  /* Body */
  --text-body-desktop: 1.125rem;
  --text-body-mobile:  1rem;
  --text-body:         clamp(1rem, 1.5vw, 1.125rem); /* fluid version */

  /* ─── Spacing ── tokens.json > spacing ───────────────── */

  --container-padding-desktop: 4rem;
  --container-padding-mobile:  2rem;
  --container-px: clamp(2rem, 4vw, 4rem); /* fluid version */

  --section-padding-desktop: 4rem;
  --section-padding-mobile:  3rem;
  --section-py: clamp(3rem, 5vw, 4rem);   /* fluid version */

  /* ─── Not in tokens.json — minimal CSS necessities only ─ */

  --container-max: 1280px;
  --transition:    all 0.25s ease;

  --color-blue-hover: #153d5f;
  --color-red-hover:  #a00d25;
  --color-border:     #e5e7eb;
}