/* cybee 5.0 · Signal. Signal layer over the foundation tokens (colors, type, spacing).
   Swiss in the bones (grid, hairlines, square cells, one blue). Valley in the skin (night ground,
   light instead of paint, rounded touch surfaces, springs). Engine: assets/cy-signal.js. */
:root {
  /* Night: the brand ground. Neutral, never navy. */
  --night: #0A0A0B;        /* page */
  --graphite: #111113;     /* raised */
  --carbon: #1A1A1D;       /* inset, controls */
  --hair: rgba(255,255,255,.08);
  --hair-strong: rgba(255,255,255,.14);
  --night-ink: #F5F5F7;    /* 18.6:1 on night */
  --night-2: #A1A1A6;      /* secondary, 7.9:1 */
  --night-3: #8E8E93;      /* tertiary, 6.0:1, labels only */
  /* Paper: the proof ground. Evidence, Passport, print. */
  --frost: #F5F5F7;
  /* Signal: blue is light, not paint */
  --signal: #2757C9;       /* fills, glows. 3.1:1 on night, never small type there */
  --signal-lift: #85A7FF;  /* type, beams and focus on night, 8.6:1 */
  --signal-glow: 0 0 0 1px rgba(133,167,255,.35), 0 0 32px -4px rgba(39,87,201,.6);

  /* Square what you read. Round what you touch. */
  --radius-read: 0;        /* cells, rules, figures, evidence rows */
  --radius-key: 6px;       /* keycaps, chips */
  --radius-control: 10px;  /* buttons, fields, command pill */
  --radius-card: 14px;     /* cards, popovers, notifications */
  --radius-window: 22px;   /* windows, device frames */
  --radius-pill: 999px;

  /* Elevation: four materials, no drop shadows on reading surfaces */
  --elev-hairline: 0 0 0 1px var(--hair);
  --elev-lifted: 0 0 0 1px var(--hair), inset 0 1px 0 rgba(255,255,255,.06), 0 12px 32px -16px rgba(0,0,0,.7);
  --elev-glass: 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px -16px rgba(0,0,0,.75);
  --glass-fill: rgba(28,28,30,.66);
  --glass-filter: saturate(180%) blur(28px); /* @kind other */
  --elev-glow: var(--signal-glow);

  /* Motion 5.0. The base gestures stay on --ease; these add the Valley feel. */
  --ease-out: cubic-bezier(.16,1,.3,1); /* @kind other */        /* expo out: arrivals */
  --ease-in-out: cubic-bezier(.65,0,.35,1); /* @kind other */    /* sweeps, scans */
  --ease-spring: linear(0, .034, .128 4.4%, .52 11.3%, .78 16.4%, .93 21.7%, 1.01 27.2%, 1.035 32%, 1.03 38%, 1.01 48%, .998 62%, 1); /* @kind other */ /* 4% overshoot, calm */
  --dur-instant: 90ms; /* @kind other */     /* press */
  --dur-snap: 180ms; /* @kind other */       /* hover, toggles */
  --dur-glide: 420ms; /* @kind other */      /* panels, popovers */
  --dur-arrive: 720ms; /* @kind other */     /* text arrival */
  --dur-scene: 1200ms; /* @kind other */     /* video scene change */
  --ambient-period: 7s; /* @kind other */    /* living patterns never loop faster than 6s */
  --blur-arrive: 10px; /* @kind other */
  --press-scale: .97; /* @kind other */

  /* Type 5.0 additions (fonts unchanged) */
  --text-display: clamp(56px,9vw,148px);   /* Neue Machina 500, -.055em, .92 */
  --text-headline: clamp(40px,5vw,72px);   /* Neue Machina 500, -.045em, 1.02 */
  --tracking-display-5: -.055em; /* @kind font */
  --space-hero: 160px;
}

/* Colour carries meaning. Blue is identity and action; each product pillar owns one hue.
   A composition uses blue plus at most one pillar hue, as a tint ground, a 6px cell, a 3px rule,
   pattern light or a chart fill. Sheen is light only: pulses, rings, glass edges, never text. */
:root {
  --sky: #3FC3F2;    /* pillar: agents and the assistant */
  --iris: #794DFF;   /* pillar: proof and learning */
  --mint-5: #00D4A0; /* pillar: hardening, a named good result */
  --ember: #FF6B2B;  /* attention: a person decides. Never a pillar ground */
  --sheen: linear-gradient(120deg, #3FC3F2 0%, #2757C9 48%, #794DFF 100%); /* @kind other */
}
:root, :root[data-appearance="light"] {
  --s-tint-signal: #EEF3FF;
  --s-tint-sky: #E8F8FE;
  --s-tint-iris: #F3EFFF;
  --s-tint-mint: #E7FAF3;
  --s-ink-sky: #0A6F94;
  --s-ink-iris: #6938EF;
  --s-ink-mint: #007A59;
  --s-ink-ember: #AD3300;
}
:root[data-appearance="dark"], :root[data-theme="dark"]:not([data-appearance="light"]) {
  --s-tint-signal: #0D1426;
  --s-tint-sky: #07161C;
  --s-tint-iris: #130F24;
  --s-tint-mint: #07170F;
  --s-ink-sky: #7FD8F7;
  --s-ink-iris: #B09AFF;
  --s-ink-mint: #22DEAB;
  --s-ink-ember: #FF9A62;
}

/* Themed roles for 5.0 surfaces. Light is the default; dark is one switch on html[data-appearance]. */
:root, :root[data-appearance="light"] {
  --s-bg: #FFFFFF;
  --s-bg-rgb: 255,255,255;
  --s-raised: #F5F5F7;
  --s-inset: #EDEDF0;
  --s-card: #FFFFFF;
  --s-line: rgba(0,0,0,.08);
  --s-line-2: rgba(0,0,0,.14);
  --s-ink: #151515;
  --s-ink-2: #515154;
  --s-ink-3: #6E6E73;
  --s-fade: #8E8E93;
  --s-accent-ink: #2757C9;
  --s-accent-wash: rgba(39,87,201,.07);
  --s-accent-line: rgba(39,87,201,.35);
  --s-glass: rgba(255,255,255,.62);
  --s-glass-line: rgba(0,0,0,.08);
  --s-lifted: 0 0 0 1px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(0,0,0,.04), 0 16px 36px -20px rgba(0,0,0,.22);
  --s-float: 0 0 0 1px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8), 0 24px 60px -18px rgba(0,0,0,.28);
  --s-glow: 0 0 0 1px rgba(39,87,201,.35), 0 0 36px -8px rgba(39,87,201,.55);
  --s-glow-bg: #F3F6FF;
  --s-key: rgba(0,0,0,.04);
  --s-hover: rgba(0,0,0,.03);
}
:root[data-appearance="dark"], :root[data-theme="dark"]:not([data-appearance="light"]) {
  --s-bg: #0A0A0B;
  --s-bg-rgb: 10,10,11;
  --s-raised: #111113;
  --s-inset: #1A1A1D;
  --s-card: #111113;
  --s-line: rgba(255,255,255,.08);
  --s-line-2: rgba(255,255,255,.14);
  --s-ink: #F5F5F7;
  --s-ink-2: #A1A1A6;
  --s-ink-3: #8E8E93;
  --s-fade: #5E5E63;
  --s-accent-ink: #85A7FF;
  --s-accent-wash: rgba(133,167,255,.08);
  --s-accent-line: rgba(133,167,255,.4);
  --s-glass: rgba(28,28,30,.62);
  --s-glass-line: rgba(255,255,255,.1);
  --s-lifted: 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.07), 0 12px 32px -16px rgba(0,0,0,.8);
  --s-float: 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.1), 0 24px 60px -12px rgba(0,0,0,.75);
  --s-glow: 0 0 0 1px rgba(133,167,255,.4), 0 0 40px -6px rgba(39,87,201,.7);
  --s-glow-bg: #0E1424;
  --s-key: rgba(255,255,255,.06);
  --s-hover: rgba(255,255,255,.03);
}