/* The Well — design tokens. The single vocabulary both the scene and the
 * reading plane speak. See apps/well/DESIGN.md. */

:root {
  /* daylight water — soft porcelain, cool paper */
  --bg: #eef2f8;
  --bg-deep: #e2e8f2;
  --bg-high: #fbfcfe;
  --surface: #ffffff;
  --surface-2: #eef2f8;
  --border: #d7deea;

  /* ink */
  --text: #1b2438;
  --text-2: #56668a;
  --text-3: #8b98b0;

  /* a near-white halo behind scene labels so ink text stays legible over the
     busy world (light-theme counterpart of the old deep-water text-shadow) */
  --label-halo: rgba(248, 250, 253, 0.92);

  /* containers — deepened one step for contrast on a light field, same hues */
  --vision: #bf8a2c;
  --roadmap: #1f9aa1;
  --tech: #5866cf;
  --design: #c25d95;
  --learning: #3f9e73;
  --tasks: #6b7688;
  --files: #7e57c2;
  --warn: #d15a3a;

  /* threads */
  --thread: #b6c0d2;

  /* type */
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "Iowan Old Style", "Palatino", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* motion */
  --glide: cubic-bezier(0.22, 1, 0.36, 1);
  --settle: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-micro: 180ms;
  --t-local: 350ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, var(--bg-high) 0%, var(--bg) 55%, var(--bg-deep) 100%);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body.room { background: var(--bg-high); }

::selection { background: rgba(191, 138, 44, 0.22); }

a { color: inherit; }

/* container hue helpers — used by chips, labels, borders everywhere */
.hue-vision   { --hue: var(--vision); }
.hue-roadmap  { --hue: var(--roadmap); }
.hue-tech     { --hue: var(--tech); }
.hue-design   { --hue: var(--design); }
.hue-learning { --hue: var(--learning); }
.hue-tasks    { --hue: var(--tasks); }
.hue-files    { --hue: var(--files); }

.code-chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--hue, var(--text-2));
  background: color-mix(in srgb, var(--hue, #8a93a6) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--hue, #8a93a6) 32%, transparent);
  white-space: nowrap;
}

.smallcaps {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.tnum { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}