/* ============================================================================
   Synapse · tokens.css
   Apple design-token layer + base reset. No component styling lives here.
   Maps DESIGN-apple.md → CSS custom properties (CONTRACT §4).
   Inter (Google Fonts) substitutes for SF Pro on non-Apple platforms; on
   macOS/iOS/Safari the system-ui / -apple-system stack resolves to real SF Pro.
   ============================================================================ */

/* Inter as the SF-Pro substitute — keeps index.html clean (no <link> needed).
   Weights mirror Apple's ladder: 300 / 400 / 600 / 700. ss03 ≈ SF Pro's "a". */

:root {
  /* --- Accent (the single brand interactive color) ----------------------- */
  --blue: #0066cc;          /* Action Blue — every link / pill CTA / interactive */
  --blue-focus: #0071e3;    /* Focus ring on buttons (outline: 2px solid) */
  --blue-on-dark: #2997ff;  /* Sky Link Blue — in-copy links on dark surfaces */

  /* --- Ink (text on light) ----------------------------------------------- */
  --ink: #1d1d1f;           /* Near-black — headlines + body */
  --ink-80: #333;           /* Softer body (e.g. pearl-button surface) */
  --ink-48: #7a7a7a;        /* Disabled text + legal fine-print */

  /* --- Surfaces ---------------------------------------------------------- */
  --canvas: #fff;           /* Dominant canvas */
  --parchment: #f5f5f7;     /* Signature off-white — graph canvas, header */
  --pearl: #fafafc;         /* Near-white ghost-button fill */
  --tile-1: #272729;        /* Primary near-black tile */
  --black: #000;            /* True void — nav bar, video frames */

  /* --- Hairlines & chrome ------------------------------------------------ */
  --hairline: #e0e0e0;      /* 1px hairline border (cards, chips, links) */
  --divider: #f0f0f0;       /* Soft divider tone (ring-like, not a hard line) */
  --chip: #d2d2d7;          /* Translucent chip gray base */

  /* --- Radius scale ------------------------------------------------------ */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-pill: 9999px;

  /* --- Spacing scale (8px base) ------------------------------------------ */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 17px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;

  /* --- Type families ----------------------------------------------------- */
  --font-display: "SF Pro Display", system-ui, -apple-system, "Inter", sans-serif;
  --font-text: "SF Pro Text", system-ui, -apple-system, "Inter", sans-serif;

  /* --- Elevation — the one soft shadow (drawer + cards, sparingly) -------- */
  --shadow-product: 0 3px 30px rgba(0, 0, 0, .10);

  /* --- Entity type palette (muted, Apple-harmonious) --------------------- */
  --t-organisation: #1d1d1f;
  --t-department: #0066cc;
  --t-team: #5e5ce6;
  --t-person: #0071e3;
  --t-agent: #e8590c;
  --t-tool: #7a7a7a;
  --t-workflow: #2f9e44;
  --t-sop: #9c36b5;
  --t-project: #1098ad;

  /* --- Type scale helper props (size / weight / line-height / tracking) ---
     Display headlines: SF Pro Display 600, negative tracking.
     Body: 17px / 400 / 1.47 / -0.374px. Weight ladder 300/400/600/700. */
  --w-light: 300;
  --w-regular: 400;
  --w-semibold: 600;
  --w-bold: 700;

  --fs-hero: 56px;     --lh-hero: 1.07;   --ls-hero: -0.28px;
  --fs-display: 40px;  --lh-display: 1.1; --ls-display: 0;
  --fs-section: 34px;  --lh-section: 1.47; --ls-section: -0.374px;
  --fs-lead: 28px;     --lh-lead: 1.14;   --ls-lead: 0.196px;
  --fs-lead-airy: 24px; --lh-lead-airy: 1.5; --ls-lead-airy: 0;
  --fs-tagline: 21px;  --lh-tagline: 1.19; --ls-tagline: 0.231px;
  --fs-body: 17px;     --lh-body: 1.47;   --ls-body: -0.374px;
  --fs-caption: 14px;  --lh-caption: 1.43; --ls-caption: -0.224px;
  --fs-fine: 12px;     --lh-fine: 1.0;    --ls-fine: -0.12px;
  --fs-micro: 10px;    --lh-micro: 1.3;   --ls-micro: -0.08px;
}

/* ============================================================================
   Base reset — box model, margins, smoothing, page defaults.
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss03";
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure {
  margin: 0;
}

/* Headlines default to the display face with the signature Apple-tight tracking. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-section);
}

a {
  color: var(--blue);
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* System-wide micro-interaction: active press shrinks. */
button:active,
[role="button"]:active {
  transform: scale(.96);
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Keyboard focus ring uses the focus-blue across all interactive elements. */
:focus-visible {
  outline: 2px solid var(--blue-focus);
  outline-offset: 2px;
}

/* ============================================================================
   Type-scale utility classes — opt-in ramps mirroring the DESIGN-apple ladder.
   Use on real elements where a heading tag's defaults don't fit.
   ============================================================================ */

.t-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--w-semibold);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--w-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.t-section {
  font-family: var(--font-text);
  font-size: var(--fs-section);
  font-weight: var(--w-semibold);
  line-height: var(--lh-section);
  letter-spacing: var(--ls-section);
}

.t-lead {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--w-regular);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
}

.t-lead-airy {
  font-family: var(--font-text);
  font-size: var(--fs-lead-airy);
  font-weight: var(--w-light);   /* the rare weight 300 */
  line-height: var(--lh-lead-airy);
  letter-spacing: var(--ls-lead-airy);
}

.t-tagline {
  font-family: var(--font-display);
  font-size: var(--fs-tagline);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tagline);
  letter-spacing: var(--ls-tagline);
}

.t-body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.t-body-strong {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--w-semibold);
  line-height: 1.24;
  letter-spacing: var(--ls-body);
}

.t-caption {
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  font-weight: var(--w-regular);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
}

.t-caption-strong {
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  line-height: 1.29;
  letter-spacing: var(--ls-caption);
}

.t-fine {
  font-family: var(--font-text);
  font-size: var(--fs-fine);
  font-weight: var(--w-regular);
  line-height: var(--lh-fine);
  letter-spacing: var(--ls-fine);
}

.t-micro {
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  font-weight: var(--w-regular);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
}

/* Muted text helpers. */
.t-muted { color: var(--ink-48); }
.t-muted-80 { color: var(--ink-80); }

/* ============================================================================
   Synapse Bio — node-type palette (overrides the org palette above).
   ============================================================================ */
:root {
  --t-gene: #2f9e44;       /* green   */
  --t-protein: #0066cc;    /* blue    */
  --t-pathway: #9c36b5;    /* purple  */
  --t-disease: #e8590c;    /* orange  */
  --t-drug: #1098ad;       /* teal    */
  --t-process: #7a7a7a;    /* gray    */
  --candidate: #f08c00;    /* amber — predicted/dashed candidate edges */
}

/* ============================================================================
   Synapse Bio · "Lab Noir / Bioluminescence" — dark-first mission-control.
   Dark is the DEFAULT (:root override below wins over the Apple-light base).
   Light is opt-in via html.light (higher specificity restores the light ramp).
   Same property names → every existing component recolors for free.
   ============================================================================ */
:root {
  color-scheme: dark;
  /* surfaces — cool tinted-neutral ramp (never pure black except --void) */
  --void: #08090c;
  --canvas: #0b0d12;        /* app canvas (was #fff) */
  --parchment: #0e1016;     /* header / sidebars (was #f5f5f7) */
  --pearl: #161a23;         /* ghost-button fill */
  --surface: #11141b;
  --surface-2: #161a23;
  --elevated: #1c212c;
  --tile-1: #1c212c;
  /* ink */
  --ink: #f4f6fb;
  --ink-80: #aab2c2;
  --ink-48: #828c9e;
  /* hairlines */
  --hairline: #262c38;
  --line: #262c38;
  --line-soft: #1b212c;
  --divider: #1b212c;
  --chip: #2a313f;
  /* accent — single brand interactive, glows on black */
  --blue: #4d9fff;
  --blue-focus: #5b9dff;
  --accent: #4d9fff;
  --accent-glow: #5b9dff;
  --accent-dim: #1e3a5f;
  /* entity palette — brighter, lower-chroma-at-rest for dark */
  --t-gene: #3ddc97;
  --t-protein: #4d9fff;
  --t-pathway: #b06bff;
  --t-disease: #ff7a45;
  --t-drug: #22d3ee;
  --t-process: #8b93a7;
  --candidate: #ffb224;
  --candidate-glow: #ffd166;
  /* status */
  --st-new: #4d9fff;
  --st-reviewing: #ffb224;
  --st-validated: #3ddc97;
  --st-rejected: #ff5d5d;
  /* elevation + glass */
  --shadow-product: 0 8px 40px rgba(0, 0, 0, .55);
  --glass-blur: blur(16px) saturate(140%);
  --glass-bg: color-mix(in srgb, var(--elevated) 82%, transparent);
  /* data type face + ramps */
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-data: 13px;
  --fs-overline: 11px;
}

/* Light theme — opt-in. Restores the Apple-light ramp (same property names). */
html.light {
  color-scheme: light;
  --void: #f5f5f7;
  --canvas: #fff;
  --parchment: #f5f5f7;
  --pearl: #fafafc;
  --surface: #fff;
  --surface-2: #f7f7f9;
  --elevated: #fff;
  --tile-1: #272729;
  --ink: #1d1d1f;
  --ink-80: #333;
  --ink-48: #7a7a7a;
  --hairline: #e0e0e0;
  --line: #e0e0e0;
  --line-soft: #ececef;
  --divider: #f0f0f0;
  --chip: #d2d2d7;
  --blue: #0066cc;
  --blue-focus: #0071e3;
  --accent: #0066cc;
  --accent-glow: #0071e3;
  --accent-dim: #cfe3ff;
  --t-gene: #2f9e44;
  --t-protein: #0066cc;
  --t-pathway: #9c36b5;
  --t-disease: #e8590c;
  --t-drug: #1098ad;
  --t-process: #7a7a7a;
  --candidate: #f08c00;
  --candidate-glow: #f59f00;
  --st-new: #0066cc;
  --st-reviewing: #a07800;
  --st-validated: #2b8a3e;
  --st-rejected: #c92a2a;
  --shadow-product: 0 3px 30px rgba(0, 0, 0, .10);
  --glass-bg: color-mix(in srgb, #ffffff 82%, transparent);
}