/* Plinth v4 · Clay. Bright, soft, tactile. Shared tokens and fonts for every page.
   Rule of thumb: FILL colours (--coral, --mint ...) are for backgrounds and shapes; INK colours (--coral-ink ...) are for text on light surfaces. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../assets/fonts/bricolage.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../assets/fonts/figtree.woff2") format("woff2"); }
:root {
  color-scheme: light;
  /* surfaces */
  --bg: #e3eaff; --bg-2: #d5dffb;            /* page sky, and a slightly deeper band for alternating sections */
  --void: var(--bg);                          /* legacy alias: the page background */
  --panel: #f5f8ff; --panel-2: #ffffff; --panel-3: #c9d4f3;   /* raised clay, brightest clay, pressed/track */
  --line: rgba(29, 33, 66, .10); --line-2: rgba(29, 33, 66, .20);
  /* text */
  --ink: #1d2142; --text: var(--ink); --body: #323862; --muted: #4f567f; --dim: #7279a2; --faint: #5d6490;
  /* clay fills */
  --coral: #ff8a5b; --butter: #ffd45e; --mint: #6fd8ae; --lilac: #b9a6ff; --pink: #ff9ec4; --sky: #7ab8ff; --rose: #ff7b8a; --teal: #5fd7d0;
  /* ink twins: readable as text on --bg / --panel (all >= 4.5:1) */
  --coral-ink: #b2400f; --butter-ink: #7a5600; --mint-ink: #0d6b49; --lilac-ink: #5a3cc4; --pink-ink: #ac2260; --sky-ink: #1a5cb4; --rose-ink: #b0243a; --teal-ink: #0b6a66;
  /* the one accent: tangerine clay button with ink label */
  --accent: var(--coral); --accent-ink: #2b1004; --accent-text: var(--coral-ink);
  --amber: var(--coral); --amber-ink: var(--accent-ink);   /* legacy aliases */
  --ember: #ff9b6e; --gold: var(--butter);                 /* legacy aliases */
  /* category rooms: fill + ink */
  --room-1: #ff8a5b; --room-2: #7ab8ff; --room-3: #ff9ec4; --room-4: #6fd8ae; --room-5: #b9a6ff; --room-6: #ffd45e; --room-7: #ff9b6e; --room-8: #5fd7d0;
  --room-1-ink: #b2400f; --room-2-ink: #1a5cb4; --room-3-ink: #ac2260; --room-4-ink: #0d6b49; --room-5-ink: #5a3cc4; --room-6-ink: #7a5600; --room-7-ink: #a8430f; --room-8-ink: #0b6a66;
  /* clay: soft light from the top left, blue-tinted shadows. Use --puff on raised things, --dent on inputs and tracks. */
  --shade: 52, 64, 140;
  --puff:    inset 0 2px 0 rgba(255, 255, 255, .95), inset 0 -7px 14px rgba(var(--shade), .07), 0 2px 3px rgba(var(--shade), .10), 0 18px 32px -14px rgba(var(--shade), .38);
  --puff-lg: inset 0 3px 0 rgba(255, 255, 255, .95), inset 0 -12px 24px rgba(var(--shade), .08), 0 3px 5px rgba(var(--shade), .10), 0 34px 60px -24px rgba(var(--shade), .45);
  --puff-sm: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 -4px 8px rgba(var(--shade), .08), 0 1px 2px rgba(var(--shade), .12), 0 8px 16px -8px rgba(var(--shade), .35);
  --dent:    inset 0 3px 7px rgba(var(--shade), .16), inset 0 -1px 0 rgba(255, 255, 255, .8);
  /* type */
  --display: "Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif;
  --sans: "Figtree", system-ui, "Segoe UI", Arial, sans-serif;
  /* shape */
  --r-sm: 12px; --r: 20px; --r-lg: 32px; --pad: clamp(16px, 2.6vw, 40px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* Springs: a real damped spring as a linear() curve where supported, an overshooting bezier elsewhere. */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.069, 0.23, 0.426, 0.618, 0.782, 0.91, 0.998, 1.052, 1.078, 1.083, 1.076, 1.062, 1.046, 1.03, 1.016, 1.006, 0.999, 0.995, 0.993, 0.993, 0.994, 0.995, 0.996, 0.998, 0.999, 1, 1, 1, 1.001, 1.001, 1.001, 1); }
}

/* Smooth page-to-page navigation: every page opts in, the top bar stays put (named in styles.css) and the page body
   leaves and arrives with a short rise. Pages without a bar simply cross-fade. */
@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
::view-transition-old(root) { animation: vt-out .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .45s cubic-bezier(.2, .7, .1, 1) .06s both; }
::view-transition-group(site-header) { animation-duration: .4s; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}