/* Material tokens for the collage app. Local fonts only (Geist / Geist Mono, OFL); no runtime or font CDN. */
@font-face { font-family: "Geist"; src: url("./fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("./fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  color-scheme: dark;
  /* OKLCH neutral ramp; panels separate by tone, not borders */
  --n0: oklch(0.13 0.005 250); --n1: oklch(0.16 0.005 250); --n2: oklch(0.18 0.005 250);
  --n3: oklch(0.22 0.008 250); --n4: oklch(0.26 0.01 250); --n5: oklch(0.30 0.01 250);
  --bg: var(--n0); --surface: var(--n2); --raised: var(--n4); --well: oklch(0.095 0.004 250);
  --text: oklch(0.96 0.004 250); --muted: oklch(0.72 0.012 250); --faint: oklch(0.56 0.012 250);
  --accent: oklch(0.78 0.14 230); --accent-ink: oklch(0.18 0.03 230); --accent-soft: oklch(0.78 0.14 230 / 0.15);
  --signal: oklch(0.78 0.14 155); --warn: oklch(0.80 0.13 80); --bad: oklch(0.74 0.15 25);
  --hairline: oklch(1 0 0 / 0.06);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 14px; --radius-sm: 9px; --space: 8px;
  --inset: inset 0 2px 8px oklch(0 0 0 / 0.6);
  --specular: inset 0 1px 0 oklch(1 0 0 / 0.07);
  --shadow: 0 18px 44px oklch(0 0 0 / 0.45);
  --spring: cubic-bezier(0.22, 1, 0.36, 1); --spring-bounce: cubic-bezier(.34,1.56,.64,1);
  --cursor-x: 50%; --cursor-y: 0%;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
h1,h2,h3,strong { font-weight: 500; margin: 0; }
button,input,select,textarea { font: inherit; color: inherit; }
button { cursor: pointer; min-height: 40px; padding: 8px 14px; border: 0; border-radius: var(--radius-sm); background: var(--raised); box-shadow: var(--specular); transition: transform .24s var(--spring), background-color .18s ease, color .18s ease; }
button:hover { background: var(--n5); }
button:active { transform: scale(.97); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.panel { position: relative; min-width: 0; border-radius: var(--radius); background: var(--surface); box-shadow: var(--specular); }
.cursor-light { background-image: radial-gradient(520px circle at var(--cursor-x) var(--cursor-y), oklch(1 0 0 / 0.035), transparent 60%); }
.well { border-radius: var(--radius); background: var(--well); box-shadow: var(--inset), var(--specular); }
.mono,output,input[type=number] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.drawer { transition: transform .42s var(--spring), opacity .25s ease; }
svg,canvas,img { max-width: 100%; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }