/* Dayshaper — design tokens. The one source of truth: the app and the
   design-system page both import this file. Sky colours below are only the
   first-paint defaults (a clear morning); src/sky.js repaints them live. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2-variations"), url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Registered so the browser can crossfade the sky instead of snapping it. */
@property --sky-top { syntax: "<color>"; inherits: true; initial-value: #b3cce8; }
@property --sky-mid { syntax: "<color>"; inherits: true; initial-value: #d6e2ee; }
@property --sky-bot { syntax: "<color>"; inherits: true; initial-value: #f3ebe1; }
@property --ridge-0 { syntax: "<color>"; inherits: true; initial-value: #e3e9f0; }
@property --ridge-1 { syntax: "<color>"; inherits: true; initial-value: #d8e0ea; }
@property --ridge-2 { syntax: "<color>"; inherits: true; initial-value: #ccd7e4; }
@property --haze { syntax: "<color>"; inherits: true; initial-value: #f5efe7; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #3b5783; }
@property --ink-low { syntax: "<color>"; inherits: true; initial-value: #3f5a84; }
@property --stars { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --clouds { syntax: "<number>"; inherits: true; initial-value: 0.95; }
@property --moon { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --rain { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --snow { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  /* ---- type: one family; hierarchy is carried by weight, the thinnest thing is the most important ---- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --w-hair: 200;      /* the clock */
  --w-light: 300;     /* titles */
  --w-book: 400;      /* body */
  --w-mid: 500;       /* small caps labels */
  --t-title: 24px;
  --t-sub: 14px;
  --t-body: 14px;
  --t-small: 12px;
  --t-caps: 10.5px;
  --track-caps: 0.14em;

  /* ---- shape ---- */
  --r-pill: 999px;
  --r-sheet: 28px;
  --stone: 54px;
  --tap: 44px;        /* minimum touch target */

  /* ---- motion: springs for the hand, slow light for the sky ---- */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --glide: cubic-bezier(0.22, 1, 0.36, 1);
  --t-touch: 180ms;
  --t-panel: 420ms;
  --t-sky: 1600ms;

  /* ---- sky (live values written by src/scene.js) ---- */
  --pill: rgba(255, 255, 255, 0.5);
  --pill-strong: rgba(255, 255, 255, 0.72);
  --pill-line: rgba(255, 255, 255, 0.6);
  --shadow: rgba(60, 80, 120, 0.22);
  --track: rgba(255, 255, 255, 0.42);
  --track-day: rgba(255, 250, 240, 0.5);
  --dot: rgba(59, 87, 131, 0.5);
  --cloud: #fbf7f2;
  --sheet: rgba(250, 248, 246, 0.95);

  /* ---- celestial accents ---- */
  --sun: #f6c35c;
  --moonlight: #f4d38c;
  --danger: #e27a68;

  /* ---- clays (mirrors src/types.js for the chrome) ---- */
  --sleep-0: #a3b0e0; --sleep-1: #6a7bbd;
  --work-0: #a3c9ae;  --work-1: #6c9c7d;
  --eat-0: #f3d38f;   --eat-1: #dcae5c;
  --move-0: #f5b793;  --move-1: #e08c68;
  --rest-0: #eab0c8;  --rest-1: #c983a2;
}