/* Credsir design tokens — mirrors ds.jsx from the Claude Design handoff. */
:root {
  /* Color (exact from ds.jsx) */
  --c-blue:       #2563EB;
  --c-blue-dk:    #1D4ED8;
  --c-blue-tint:  #EFF4FF;
  --c-blue-line:  #D6E2FE;
  --c-green:      #16A34A;
  --c-green-tint: #ECFDF3;
  --c-amber:      #F59E0B;
  --c-amber-tint: #FFF8EB;
  --c-ink:        #0F1B2D;
  --c-ink-2:      #334155;
  --c-muted:      #64748B;
  --c-faint:      #94A3B8;
  --c-line:       #E7EAEF;
  --c-line-2:     #EDF0F4;
  --c-surface:    #FFFFFF;
  --c-tint:       #F7F9FC;
  --c-tint-2:     #F1F4F9;
  --c-red:        #E11D48;
  --c-red-tint:   #FFF1F3;
  --c-grad:       linear-gradient(115deg,#1FB8A6 0%,#4F6BF0 42%,#7C3AED 100%);

  /* Typography */
  --f-ui:   "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-read: "Newsreader", Georgia, "Times New Roman", serif;
  --f-mono: "Space Mono", ui-monospace, SFMono-Regular, monospace;

  /* Radii */
  --r-sm: 7px;  --r-md: 10px; --r-lg: 14px; --r-xl: 16px; --r-pill: 999px;

  /* Shadow */
  --sh-1: 0 6px 22px rgba(15,27,45,.06);
  --sh-2: 0 8px 30px rgba(15,27,45,.07);

  /* Layout */
  --content-w: 720px;
  --wide-w:    1180px;
  --header-h:  68px;
  --header-h-mobile: 54px;
  --reading-progress-h: 3px;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-5: 22px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px;
}