/* Delightful tokens, visual system v2: dark by default, light designed (not inverted).
   Spec: studio/delightful/work/VISUAL-V2.md. Motion tokens follow .claude/skills/motion-principles/references/timing-and-easing.md. */

@font-face{font-family:"Onest";src:url("../fonts/onest-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root {
  color-scheme: dark;
  /* grounds and surfaces */
  --bg: #111111; --s1: #191919; --s2: #212121; --s3: #2a2a2a;
  --line: #262626; --line-2: #333333;
  /* text */
  --t1: #ededed; --t2: #a1a1a1; --t3: #949494;
  --on-t1: #111111;               /* text on a white (t1) fill */
  --scrim: rgba(0, 0, 0, .6);
  --float: 0 16px 48px rgba(0, 0, 0, .5);
  --hover-ring: rgba(255, 255, 255, .22);

  /* type */
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* scale: 12 13 14 16 20 28 40 */
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-28: 28px; --fs-40: 40px;

  /* space and shape: 8 px base */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px;
  --r-media: 12px; --r-card: 16px; --r-pop: 14px; --r-ctl: 10px; --r-pill: 999px;
  --side: 248px; --rail: 64px;
  --page-x: 40px;

  /* motion */
  --dur-instant: 100ms; --dur-quick: 160ms; --dur-base: 240ms; --dur-panel: 360ms; --dur-open: 480ms;
  --stagger: 12ms;            /* per tile, reading order; the grid caps the wave at 100 ms of delay */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  /* springs as sampled linear() curves, each with the duration it settles in (1 percent). Generated: node studio/delightful/work/motion/springs.mjs --write */
  /* springs:begin (generated by work/motion/springs.mjs) */
  --spring-snappy: linear(0, 0.0167, 0.0603, 0.1219, 0.1948, 0.2737, 0.3543, 0.4337, 0.5097, 0.5808, 0.6459, 0.7048, 0.7571, 0.803, 0.8428, 0.8768, 0.9056, 0.9296, 0.9493, 0.9654, 0.9782, 0.9882, 0.9959, 1.0016, 1.0058, 1.0086, 1.0104, 1.0114, 1.0118, 1.0116, 1.0112, 1.0105, 1);  --spring-snappy-dur: 252ms;  /* stiffness 600, damping 40, overshoot 1.2% */
  --spring-default: linear(0, 0.0195, 0.0702, 0.1419, 0.2264, 0.317, 0.4089, 0.4982, 0.5823, 0.6596, 0.7289, 0.7898, 0.8423, 0.8866, 0.9234, 0.9532, 0.9768, 0.9949, 1.0085, 1.0181, 1.0244, 1.0282, 1.0299, 1.0301, 1.0291, 1.0273, 1.0249, 1.0223, 1.0195, 1.0168, 1.0141, 1.0117, 1);  --spring-default-dur: 413ms;  /* stiffness 260, damping 24, overshoot 3% */
  --spring-press: linear(0, 0.0338, 0.1212, 0.243, 0.3825, 0.5263, 0.6641, 0.7884, 0.8947, 0.9808, 1.0462, 1.092, 1.1202, 1.1335, 1.1348, 1.1271, 1.1132, 1.0955, 1.0762, 1.0569, 1.0388, 1.0228, 1.0095, 0.9989, 0.9911, 0.9858, 0.9828, 0.9817, 0.982, 0.9834, 0.9855, 0.988, 1);  --spring-press-dur: 427ms;  /* stiffness 420, damping 22, overshoot 13.6% */
  /* springs:end */

}

/* Light: designed on its own ramp */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafa; --s1: #ffffff; --s2: #f2f2f2; --s3: #e8e8e8;
  --line: #e5e5e5; --line-2: #d4d4d4;
  --t1: #111111; --t2: #555555; --t3: #666666;
  --on-t1: #fafafa;
  --scrim: rgba(17, 17, 17, .4);
  --float: 0 16px 48px rgba(0, 0, 0, .14);
  --hover-ring: rgba(0, 0, 0, .22);
}

@media (max-width: 1100px) { :root { --page-x: 24px; } }
@media (max-width: 820px) { :root { --page-x: 16px; } }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-quick: 0ms; --dur-base: 120ms; --dur-panel: 160ms; --dur-open: 200ms; --stagger: 0ms; }
}