/* Design tokens — shared by the homepage and case pages */
:root {
  /* Color */
  --bg:            #FFFFFF;
  --surface:       #FAFBFC;
  --border:        #ECEEF1;
  --border-strong: #E3E6EA;
  --border-control: #8A909C; /* 3:1+ boundary for interactive controls */
  --text:          #0F1115;
  --muted:         #5B616E;
  --subtle:        #6B7280;
  --accent:        #2F5BEA;
  --accent-text:   #2549C8; /* accent text on --accent-bg */
  --accent-bg:     #EEF2FE;
  --ok:            #22A05B;
  --ok-bg:         #EAF7EF;
  --ok-text:       #1F7A4D;
  --on-dark:       #FFFFFF;
  --shadow-hover:  0 8px 30px rgba(15, 17, 21, .06);
  --media-bg:      #F3F4F6; /* placeholder behind images */

  /* Dark surfaces (hero, footer) */
  --dark-bg:       #0F1115;
  --dark-text:     #F5F6F8; /* 17.5:1 on --dark-bg */
  --dark-muted:    #9AA0AB; /*  7.2:1 on --dark-bg */
  --dark-ok:       #7FE0A6; /* 11.8:1 on --dark-bg */
  --dark-line:     rgba(255, 255, 255, .14);

  /* Typography */
  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-xs:   13px;   /* eyebrow labels */
  --fs-sm:   13px;   /* pills, status */
  --fs-base: 15px;   /* nav, buttons */
  --fs-md:   16px;   /* card body */
  --fs-lg:   18px;   /* lead paragraph */
  --fs-xl:   30px;   /* card title */
  --fs-2xl:  36px;   /* section / footer title */
  --fs-3xl:  clamp(36px, 5.4vw, 64px); /* hero */

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

  --lh-tight: 1.06;
  --lh-body:  1.55;

  --ls-tight:   -.025em;
  --ls-snug:    -.015em;
  --ls-eyebrow: .06em;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 88px;

  /* Radius */
  --radius-sm:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* Layout — 12-column grid */
  --container: 1280px;   /* max width including side padding */
  --gutter:    64px;     /* side padding */
  --col-gap:   24px;
  --section:   112px;    /* vertical rhythm between sections */
  --nav-h:     80px;     /* dark header height */
}

@media (max-width: 960px) {
  :root { --section: 88px; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; --col-gap: 16px; --section: 64px; }
}