/* SC Science design tokens — ported verbatim from the approved Claude Design
   system (sc-science-design-system-019e00eb-cd6b-7558-a03c-d54245831c10).
   Do not hand-edit values here; change the source design instead and re-port. */

/* Typefaces.
   NOTE: no vendor font binaries were supplied with the SC Science brand assets.
   Jost is used as the closest available match to the geometric sans of the
   "SCIENCE" wordmark; IBM Plex Sans / Mono carry text and data.
   Replace this @import with local @font-face rules when licensed files arrive. */
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  --font-display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --font-sans:"IBM Plex Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
}

/* Base palette. Brand red sampled from the SC monogram (#ED1C24);
   ink ramp sampled from the SC Science uniform navy (#131927);
   cool greys sampled from lab wall / cleanroom photography (#C8CCD6). */
:root{
  --white:#ffffff;

  --red-50:#fef2f2;
  --red-100:#fde0e1;
  --red-200:#fbbfc2;
  --red-300:#f78f94;
  --red-400:#f35158;
  --red-500:#ed1c24;
  --red-600:#d01218;
  --red-700:#a80e13;
  --red-800:#7c0a0e;
  --red-900:#4e0709;

  --ink-25:#f7f8fa;
  --ink-50:#eff1f5;
  --ink-100:#dde1e9;
  --ink-150:#c8ccd6;
  --ink-200:#a8b0be;
  --ink-300:#808a9b;
  --ink-400:#5c6779;
  --ink-500:#3e495d;
  --ink-600:#2b3446;
  --ink-700:#1d2534;
  --ink-800:#131927;
  --ink-900:#0d1220;
  --ink-950:#080b12;

  /* Instrument accents — sampled from lab hardware and partner signage */
  --steel-100:#e4eff8;
  --steel-300:#7cb6e2;
  --steel-500:#0b6fbf;
  --steel-700:#08497e;

  --green-100:#dceee7;
  --green-500:#12876a;
  --green-600:#0e6b54;
  --green-700:#0a4d3d;

  --amber-100:#fdf0d3;
  --amber-500:#f2a900;
  --amber-700:#a97600;

  /* Transparency layers, for photo overlays and glass headers */
  --alpha-ink-04:rgba(19,25,39,.04);
  --alpha-ink-08:rgba(19,25,39,.08);
  --alpha-ink-16:rgba(19,25,39,.16);
  --alpha-ink-64:rgba(13,18,32,.64);
  --alpha-ink-88:rgba(8,11,18,.88);
  --alpha-white-08:rgba(255,255,255,.08);
  --alpha-white-16:rgba(255,255,255,.16);
  --alpha-white-72:rgba(255,255,255,.72);
  --alpha-white-92:rgba(255,255,255,.92);
}

:root{
  /* Size scale — px values, engineered rather than fluid */
  --text-3xs:11px;
  --text-2xs:12px;
  --text-xs:13px;
  --text-sm:14px;
  --text-base:16px;
  --text-md:18px;
  --text-lg:20px;
  --text-xl:24px;
  --text-2xl:30px;
  --text-3xl:38px;
  --text-4xl:48px;
  --text-5xl:60px;
  --text-6xl:76px;

  --leading-flush:1;
  --leading-tight:1.12;
  --leading-snug:1.24;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-tighter:-0.024em;
  --tracking-tight:-0.012em;
  --tracking-normal:0em;
  --tracking-wide:0.04em;
  --tracking-eyebrow:0.18em;
  --tracking-wordmark:0.32em;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  --type-hero-family:var(--font-display);
  --type-hero-size:var(--text-6xl);
  --type-hero-weight:var(--weight-medium);
  --type-hero-leading:var(--leading-tight);
  --type-hero-tracking:var(--tracking-tighter);

  --type-display-family:var(--font-display);
  --type-display-size:var(--text-4xl);
  --type-display-weight:var(--weight-medium);

  --type-heading-family:var(--font-display);
  --type-heading-size:var(--text-2xl);
  --type-heading-weight:var(--weight-medium);

  --type-subheading-family:var(--font-sans);
  --type-subheading-size:var(--text-md);
  --type-subheading-weight:var(--weight-semibold);

  --type-body-family:var(--font-sans);
  --type-body-size:var(--text-base);
  --type-body-leading:var(--leading-relaxed);

  --type-small-size:var(--text-sm);
  --type-caption-size:var(--text-2xs);

  --type-eyebrow-family:var(--font-display);
  --type-eyebrow-size:var(--text-2xs);
  --type-eyebrow-weight:var(--weight-semibold);
  --type-eyebrow-tracking:var(--tracking-eyebrow);

  --type-data-family:var(--font-mono);
  --type-data-size:var(--text-xs);
  --type-data-tracking:var(--tracking-wide);
}

:root{
  --space-0:0;
  --space-px:1px;
  --space-1:2px;
  --space-2:4px;
  --space-3:6px;
  --space-4:8px;
  --space-5:12px;
  --space-6:16px;
  --space-7:20px;
  --space-8:24px;
  --space-9:32px;
  --space-10:40px;
  --space-11:48px;
  --space-12:64px;
  --space-13:80px;
  --space-14:96px;
  --space-15:128px;
  --space-16:160px;

  --gap-inline:8px;
  --gap-stack:16px;
  --gap-group:32px;
  --pad-card:24px;
  --pad-card-lg:32px;
  --section-y:96px;
  --section-y-tight:64px;
  --section-y-loose:128px;
}

/* Precision-engineered geometry: hairline radii only. Nothing is a pill
   except deliberate status chips; nothing exceeds 6px except the media mask. */
:root{
  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:3px;
  --radius-md:4px;
  --radius-lg:6px;
  --radius-media:8px;
  --radius-pill:999px;

  --border-hairline:1px;
  --border-medium:2px;
  --rule-accent:3px;
  --rule-accent-width:56px;
}

/* Cool, tight, low-spread shadows. Elevation is used sparingly — the system
   prefers hairline borders. Reserve -lg and above for overlays. */
:root{
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(13,18,32,.06);
  --shadow-sm:0 1px 3px rgba(13,18,32,.08),0 1px 2px rgba(13,18,32,.04);
  --shadow-md:0 4px 12px rgba(13,18,32,.08),0 1px 3px rgba(13,18,32,.06);
  --shadow-lg:0 12px 32px rgba(13,18,32,.12),0 2px 6px rgba(13,18,32,.06);
  --shadow-xl:0 24px 64px rgba(8,11,18,.20),0 4px 12px rgba(8,11,18,.08);
  --shadow-inset-hairline:inset 0 0 0 1px rgba(19,25,39,.08);
  --shadow-focus:0 0 0 3px rgba(237,28,36,.24);

  --scrim-bottom:linear-gradient(to top,rgba(8,11,18,.88) 0%,rgba(8,11,18,.55) 38%,rgba(8,11,18,0) 78%);
  --scrim-left:linear-gradient(to right,rgba(8,11,18,.86) 0%,rgba(8,11,18,.45) 44%,rgba(8,11,18,0) 82%);
  --scrim-flat:linear-gradient(rgba(8,11,18,.52),rgba(8,11,18,.52));
}

/* Mechanical, damped motion. No bounce, no overshoot, no spring. */
:root{
  --duration-instant:80ms;
  --duration-fast:120ms;
  --duration-base:180ms;
  --duration-slow:260ms;
  --duration-deliberate:420ms;

  --ease-precise:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --ease-linear:linear;

  --transition-control:background-color var(--duration-fast) var(--ease-precise),border-color var(--duration-fast) var(--ease-precise),color var(--duration-fast) var(--ease-precise),box-shadow var(--duration-fast) var(--ease-precise);
  --transition-surface:transform var(--duration-slow) var(--ease-precise),box-shadow var(--duration-slow) var(--ease-precise),border-color var(--duration-slow) var(--ease-precise);
}

:root{
  --container-max:1280px;
  --container-narrow:768px;
  --container-wide:1512px;
  --gutter:24px;
  --gutter-lg:48px;
  --grid-columns:12;
  --header-height:72px;
  --header-height-compact:56px;
  --control-height-sm:32px;
  --control-height-md:40px;
  --control-height-lg:48px;
  --ratio-hero:16/9;
  --ratio-card:4/3;
  --ratio-portrait:3/4;
  --blur-glass:14px;
}

/* Semantic aliases — consumers should reach for these, not base ramps. */
:root{
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-500);
  --text-tertiary:var(--ink-300);
  --text-inverse:var(--white);
  --text-inverse-secondary:rgba(255,255,255,.72);
  --text-brand:var(--red-500);
  --text-link:var(--red-600);
  --text-link-hover:var(--red-700);
  --text-on-brand:var(--white);

  --surface-page:var(--white);
  --surface-subtle:var(--ink-25);
  --surface-sunken:var(--ink-50);
  --surface-raised:var(--white);
  --surface-inverse:var(--ink-900);
  --surface-inverse-raised:var(--ink-800);
  --surface-brand:var(--red-500);
  --surface-brand-hover:var(--red-600);
  --surface-brand-active:var(--red-700);
  --surface-brand-tint:var(--red-50);
  --surface-glass:var(--alpha-white-92);

  --border-subtle:var(--ink-100);
  --border-default:var(--ink-150);
  --border-strong:var(--ink-400);
  --border-inverse:var(--alpha-white-16);
  --border-brand:var(--red-500);

  --accent-rule:var(--red-500);
  --accent-rule-inverse:var(--red-400);

  --status-info-fg:var(--steel-700);
  --status-info-bg:var(--steel-100);
  --status-info-border:var(--steel-300);
  --status-success-fg:var(--green-700);
  --status-success-bg:var(--green-100);
  --status-success-border:var(--green-500);
  --status-warning-fg:var(--amber-700);
  --status-warning-bg:var(--amber-100);
  --status-warning-border:var(--amber-500);
  --status-danger-fg:var(--red-700);
  --status-danger-bg:var(--red-50);
  --status-danger-border:var(--red-400);

  --focus-ring:var(--shadow-focus);
  --focus-ring-color:var(--red-500);
  --disabled-opacity:.42;
}

/* Minimal element defaults so the theme inherits the brand voice without extra setup. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--type-body-family);font-size:var(--type-body-size);line-height:var(--type-body-leading);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);margin:0}
h1{font-size:var(--text-4xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-md)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid rgba(208,18,24,.32);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--red-600)}
code,kbd,samp{font-family:var(--font-mono);font-size:.92em}
:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}
img{display:block;max-width:100%}
hr{border:0;border-top:1px solid var(--border-subtle);margin:0}
::selection{background:var(--red-100);color:var(--ink-900)}