/* ============================================================
   Rick Thomas / RT Indianapolis Holdings, LLC
   Design System — Colors & Typography Tokens
   Source: rickthomasjr/rickthomas-co (Astro 5 + Tailwind CSS v4)
   ============================================================ */

/* ─── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {

  /* ── Brand / Palette ─────────────────────────────────────── */
  --rt-canvas:       #0A0A0A;   /* near-black page background */
  --rt-panel:        #111111;   /* card / section surface */
  --rt-line:         #222222;   /* borders, dividers */
  --rt-ink:          #F5F5F5;   /* primary text */
  --rt-quiet:        #71717A;   /* secondary / muted text */
  --rt-brand:        #4A7C5E;   /* emerald accent */
  --rt-brand-deep:   #376149;   /* darker emerald (hover) */

  /* ── Semantic Aliases ────────────────────────────────────── */
  --bg:        var(--rt-canvas);
  --surface:   var(--rt-panel);
  --border:    var(--rt-line);
  --text:      var(--rt-ink);
  --muted:     var(--rt-quiet);
  --accent:    var(--rt-brand);
  --accent-d:  var(--rt-brand-deep);

  /* ── Accent with opacity (for backgrounds/borders) ────────  */
  --accent-10:   rgba(74,124,94, 0.10);
  --accent-12:   rgba(74,124,94, 0.12);
  --accent-13:   rgba(74,124,94, 0.13);
  --accent-15:   rgba(74,124,94, 0.15);
  --accent-20:   rgba(74,124,94, 0.20);
  --accent-28:   rgba(74,124,94, 0.28);
  --accent-45:   rgba(74,124,94, 0.45);

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;

  /* ── Type Scale ──────────────────────────────────────────── */
  --text-xs:   0.75rem;    /* 12px — badges, fine print */
  --text-sm:   0.875rem;   /* 14px — secondary body */
  --text-base: 1rem;       /* 16px — default body */
  --text-md:   1.05rem;    /* ~17px — primary body paragraphs */
  --text-lg:   1.125rem;   /* 18px — card titles */
  --text-xl:   1.25rem;    /* 20px — subheadings */
  --text-2xl:  1.5rem;     /* 24px — section headings */
  --text-3xl:  1.875rem;   /* 30px — page titles */
  --text-4xl:  2.25rem;    /* 36px — large headings */

  /* ── Hero Title (fluid) ──────────────────────────────────── */
  --text-hero: clamp(3.2rem, 9vw, 7.5rem);

  /* ── Line Heights ────────────────────────────────────────── */
  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --leading-loose:  1.8;

  /* ── Font Weights ────────────────────────────────────────── */
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ── Letter Spacing ──────────────────────────────────────── */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.25em;  /* section labels */

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-sm:   0.375rem;  /* 6px  — timeline badges */
  --radius-md:   0.5rem;    /* 8px  — buttons, inputs */
  --radius-lg:   0.75rem;   /* 12px — stat blocks */
  --radius-xl:   0.875rem;  /* 14px — cards */
  --radius-2xl:  1rem;      /* 16px — CTA sections */
  --radius-full: 9999px;    /* pills / tags */

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.4);
  --shadow-focus:      0 0 0 3px rgba(74,124,94, 0.12);

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max: 72rem;  /* 1152px */
  --nav-height:    4rem;   /* 64px */

  /* ── Animation ───────────────────────────────────────────── */
  --ease-default:  ease;
  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --duration-slow: 0.6s;
}

/* ─── Semantic Type Styles ──────────────────────────────────── */

.rt-h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.rt-h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(1.8rem, 3vw, 2.25rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.rt-h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--text);
}

.rt-label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
}

.rt-body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--text);
}

.rt-body-muted {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--muted);
}

.rt-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--muted);
}

.rt-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--muted);
}

.rt-gradient-text {
  background: linear-gradient(135deg, #F5F5F5 0%, #F5F5F5 40%, #4A7C5E 70%, #376149 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}