/* ============================================================
   IRT Design Tokens — formal B2B engineering system
   Inspired by Stripe / Linear / civil engineering firms
   ============================================================ */

:root {
  /* ---------- Color: Brand ---------- */
  --color-brand:         #C4420A;   /* IRT orange — WCAG AA compliant (4.69:1 on white) */
  --color-brand-hover:   #9E3608;
  --color-brand-soft:    #FFF2EA;   /* tinted background for icon containers */

  /* ---------- Color: Surface ---------- */
  --color-bg:            #FFFFFF;
  --color-bg-alt:        #F7F8FA;   /* section alternation */
  --color-bg-dark:       #0F172A;   /* slate — dark sections */
  --color-bg-darker:     #0B1220;
  --color-surface:       #FFFFFF;   /* card */
  --color-surface-alt:   #F9FAFB;

  /* ---------- Color: Text ---------- */
  --color-text:          #0B0D10;   /* near-black for headings */
  --color-text-body:     #374151;   /* body paragraph */
  --color-text-muted:    #6B7280;   /* secondary */
  --color-text-faint:    #9CA3AF;   /* captions, meta */
  --color-text-on-dark:  #E5E7EB;   /* on slate backgrounds */
  --color-text-on-dark-muted: #9CA3AF;
  --color-text-inverse:  #FFFFFF;

  /* ---------- Color: Borders ---------- */
  --color-border:        #E5E7EB;   /* hairline */
  --color-border-strong: #D1D5DB;
  --color-border-dark:   #1F2937;   /* on slate */

  /* ---------- Color: Semantic ---------- */
  --color-focus:         #2563EB;
  --color-success:       #059669;
  --color-error:         #DC2626;

  /* ---------- Typography ---------- */
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-display: clamp(2.5rem, 5vw + 0.5rem, 4rem);  /* hero H1 */
  --fs-h1:      clamp(2rem, 3.2vw + 0.5rem, 2.75rem);
  --fs-h2:      clamp(1.625rem, 2vw + 0.5rem, 2.125rem);
  --fs-h3:      1.375rem;
  --fs-h4:      1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight:   1.15;
  --lh-heading: 1.25;
  --lh-body:    1.6;

  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-eyebrow:  0.12em;

  /* ---------- Spacing ---------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-section: clamp(3.5rem, 7vw, 6rem);

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:  0 1px 2px rgba(11, 13, 16, 0.05);
  --shadow-sm:  0 1px 3px rgba(11, 13, 16, 0.08), 0 1px 2px rgba(11, 13, 16, 0.04);
  --shadow:     0 4px 12px rgba(11, 13, 16, 0.08), 0 2px 4px rgba(11, 13, 16, 0.04);
  --shadow-lg:  0 12px 32px rgba(11, 13, 16, 0.10), 0 4px 8px rgba(11, 13, 16, 0.04);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.25);

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 960px;

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur:         220ms;
  --dur-slow:    380ms;
}