/* ============================================================================
   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". */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");

:root {
  /* --- Accent (the single brand interactive color) ----------------------- */
  --blue: #7a3dff;          /* fabius violet — every link / pill CTA / interactive (matches the landing accent) */
  --blue-focus: #6322e8;    /* Focus ring on buttons (outline: 2px solid) — fabius violet, strong */
  --blue-on-dark: #9b6bff;  /* lighter fabius violet — 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: "Inter", "SF Pro Display", system-ui, -apple-system, sans-serif;
  --font-text: "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif;

  /* --- Elevation — three-tier scale (rgba base tuned to the ink token
     #1d1d1f → 29,29,31). sm = resting chips/buttons · md = card hover /
     mini-cards · lg = drawers / modals / popovers. --shadow-product stays a
     working alias for --shadow-md so existing usages never break. ----------- */
  --shadow-sm: 0 1px 3px rgba(29, 29, 31, .08);
  --shadow-md: 0 4px 14px rgba(29, 29, 31, .12);
  --shadow-lg: 0 14px 44px rgba(29, 29, 31, .16);
  --shadow-product: var(--shadow-md);   /* alias — do not remove */

  /* --- Spring + glow timing tokens (interaction layer) ------------------- */
  --spring: cubic-bezier(.34, 1.56, .64, 1);   /* tactile press overshoot */
  --ease-out: cubic-bezier(.32, .72, 0, 1);    /* the existing calm easing */

  /* --- Living Brain · the "alive" layer ----------------------------------
     One shared organism vocabulary every surface reads. --energy is the master
     dimmer (0..1) folded into every glow's color-mix %; the reduced block at the
     foot sets it to 0 to calm the whole organism at once. Glows are box/drop-
     shadow + the graph's own canvas sprites — never flat-surface gradients. */
  --ease-bio: cubic-bezier(0.22, 0.61, 0.36, 1);  /* one-shot rises (view-in, count-up). JS twin: "power3.out" */
  --pulse-ease: cubic-bezier(.45, 0, .55, 1);     /* symmetric inhale/exhale for looping breathe keyframes */

  --breath-dur: 4.2s;        /* master breathing period — graph brain clock · system node · brand glow */
  --pulse-mid: 2.2s;         /* dashboard newest-feed dot · cockpit alert stat */
  --pulse-fast: 1.5s;        /* cockpit board at peak vitality (data-running) */
  --flow-dur: 4.6s;          /* system-map forward particle traversal (JS twin FLOW_DUR) */
  --flow-dur-recall: 6s;     /* system-map recall-arc traversal (JS twin FLOW_DUR_R) */

  --energy: 1;               /* master glow dimmer 0..1 — set 0 in the reduced block */
  --glow-soft: 0 0 12px color-mix(in srgb, var(--blue) calc(28% * var(--energy)), transparent);
  --glow-warm: 0 0 16px color-mix(in srgb, var(--t-agent) calc(32% * var(--energy)), transparent);
  --glow-alive: 0 0 0 1px color-mix(in srgb, var(--blue) calc(40% * var(--energy)), transparent),
                0 0 18px color-mix(in srgb, var(--blue) calc(22% * var(--energy)), transparent);
  --brand-glow: color-mix(in srgb, var(--blue) 36%, transparent);

  --live: #1d8a4e;           /* the "alive" green (promoted from the existing running color) */
  --live-glow: color-mix(in srgb, var(--live) 38%, transparent);

  /* graph-engine numerics — parsed to plain numbers once in graph.js readVars() */
  --synapse-hot: #6322e8;                 /* active-path firing photon */
  --synapse-calm: rgba(122,61,255,.34);   /* ambient drifting spark — fabius violet */
  --synapse-field: #7a3dff;               /* ambient energy-field mote hue */
  --agent-glow-min: 2;                    /* agent resting shadowBlur floor (= today's static look) */
  --agent-glow-max: 7;                    /* agent resting shadowBlur crest */
  --agent-glow-a-min: .12;                /* agent resting glow alpha floor (= today's) */
  --agent-glow-a-max: .26;                /* agent resting glow alpha crest */
  --field-alpha-min: .012;                /* ambient mote alpha floor */
  --field-alpha-max: .05;                 /* ambient mote alpha cap (legibility over parchment) */
  --field-motes: 18;                      /* ambient mote pool size (constant per-frame cost) */

  /* system map + shell */
  --node-pulse-edge: color-mix(in srgb, var(--blue) 38%, transparent);
  --ambient-veil: color-mix(in srgb, var(--blue) 4%, transparent);
  --flow-particle: color-mix(in srgb, var(--blue) 88%, #fff);
  --flow-particle-recall: var(--t-agent);

  /* --- Liquid Glass — one translucent material for surfaces that float over
     content. Built on the header's existing frosted pattern. --glass-edge is a 1px
     inset white top-highlight (the "lit" specular edge) — an inset shadow, NOT a
     gradient, so the no-gradient rule holds. The -soft pair is a lighter tune for
     content cards so many-card views stay smooth. Both collapse to solid under
     prefers-reduced-transparency (override block at the foot of this file). */
  --glass-bg: color-mix(in srgb, var(--canvas) 72%, transparent);
  --glass-bg-soft: color-mix(in srgb, var(--canvas) 88%, transparent);
  --glass-blur: saturate(180%) blur(16px);
  --glass-blur-soft: saturate(140%) blur(8px);
  --glass-border: 1px solid color-mix(in srgb, #fff 45%, var(--hairline));
  --glass-edge: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent);

  /* --- Entity type palette (muted, Apple-harmonious) --------------------- */
  --t-organisation: #1d1d1f;
  --t-department: #7a3dff;
  --t-team: #9b6bff;
  --t-person: #6322e8;
  --t-agent: #8b5cf6;
  --t-tool: #7a7a7a;
  --t-workflow: #2f9e44;
  --t-sop: #a855f7;
  --t-project: #7048e8;

  /* --- 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 with a spring overshoot
   for a tactile, premium feel. The transition lives on the resting state so the
   release eases back; the :active rule supplies the pressed scale. */
button,
[role="button"] {
  transition: transform .14s var(--spring);
}
button:active,
[role="button"]:active {
  transform: scale(.94);
}

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: a crisp 2px inner outline plus a soft glow ring in the
   accent so the focused control reads as intentionally lit (a11y + premium). */
:focus-visible {
  outline: 2px solid var(--blue-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-focus) 22%, transparent);
}

/* Respect reduced-motion: drop the spring transforms entirely (the glow ring
   and outline stay — they carry no motion). */
@media (prefers-reduced-motion: reduce) {
  button,
  [role="button"] {
    transition: none;
  }
  button:active,
  [role="button"]:active {
    transform: none;
  }
}

/* ============================================================================
   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); }

/* Shared Living-Brain keyframes — the only two pulse keyframes used across the
   dashboard + cockpit (a breathing live-dot ring and a soft opacity pulse). The
   per-surface arch-breathe / brand-breathe / ambient-drift live next to their
   selectors in views.css / app.css. */
@keyframes synapse-breathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 var(--live-glow); }
  50%      { transform: scale(1.18); box-shadow: 0 0 0 5px transparent; }
}
@keyframes synapse-pulse-soft {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* Liquid Glass + Living-Brain a11y/low-power fallback: collapse the material to
   solid surfaces AND set the organism's master --energy dimmer to 0 so every glow
   color-mix resolves to transparent — one place neutralizes the whole alive layer
   (element-level keyframes are additionally hard-stopped with animation:none in
   views.css / app.css). */
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
  :root {
    --glass-bg: var(--canvas);
    --glass-bg-soft: var(--canvas);
    --glass-blur: none;
    --glass-blur-soft: none;
    --glass-edge: none;

    --energy: 0;
    --glow-soft: none;
    --glow-warm: none;
    --glow-alive: none;
    --brand-glow: transparent;
    --node-pulse-edge: transparent;
    --ambient-veil: transparent;
    --synapse-calm: transparent;
    --agent-glow-max: var(--agent-glow-min);
    --agent-glow-a-max: var(--agent-glow-a-min);
    --field-alpha-min: 0;
    --field-alpha-max: 0;
  }
}