/* ============================================================
   KULTTUURI OPAS — DESIGN TOKENS  (ported from the Claude Design
   handoff: docs/concierge/design/.../tokens.css)
   Nordic-civic system. Cobalt --kt-cobalt-700 is the themeable
   per-city token. Berry = concierge voice ONLY. Sun = "on now" ONLY.
   Leaf = "Free" ONLY. Paper is never pure white.
   Adapted from artboard (.kt-phone) scoping to a real mobile app.
============================================================ */

:root {
  /* ---- Color: Brand (cobalt — themeable per city) ---- */
  --kt-cobalt-900: #001a3d;
  --kt-cobalt-700: #0058a3;   /* Primary. Buttons, links, focus. */
  --kt-cobalt-500: #0072c6;   /* Hover / interactive accent */
  --kt-cobalt-100: #d9e7f5;
  --kt-cobalt-050: #eef4fb;

  /* ---- Color: Neutrals (warm) ---- */
  --kt-ink-900:    #14171a;
  --kt-ink-700:    #2b2f33;
  --kt-ink-500:    #555a60;
  --kt-ink-400:    #7a7e85;
  --kt-ink-300:    #a7a8aa;
  --kt-line:       #e6e1d6;
  --kt-line-soft:  #efebe1;
  --kt-sand:       #ebe7dd;
  --kt-paper:      #faf8f3;   /* App bg — never pure white */
  --kt-card:       #ffffff;
  --kt-overlay:    rgba(20, 23, 26, 0.55);

  /* ---- Color: Concierge & status (reserved hues) ---- */
  --kt-berry-700:  #a3354b;   /* concierge "live" voice (text) */
  --kt-berry-500:  #c8455a;   /* concierge channel only */
  --kt-berry-050:  #fbe9ec;
  --kt-sun-500:    #f6c544;   /* "on now / live tonight" only */
  --kt-leaf-500:   #2e7a4a;   /* "Free" only */
  --kt-leaf-050:   #e3efe7;

  /* ---- Kind hues (subtle event/venue/service differentiation) ---- */
  --kt-kind-event:   #0072c6;
  --kt-kind-venue:   #6f4ec6;
  --kt-kind-service: #2e7a4a;

  /* ---- Type (Geist — OFL, FI/SV/EN coverage) ---- */
  --kt-font-sans: "Geist", "Helsinki Grotesk Web", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --kt-font-mono: "Geist Mono", "SF Mono", ui-monospace, monospace;

  --kt-fs-display:  32px;
  --kt-fs-title:    24px;
  --kt-fs-head:     19px;
  --kt-fs-card:     17px;
  --kt-fs-body:     16px;
  --kt-fs-small:    14px;
  --kt-fs-sub:      13px;
  --kt-fs-meta:     12px;
  --kt-fs-micro:    11px;
  --kt-fs-mini:     10px;

  --kt-lh-tight: 1.15;
  --kt-lh-body:  1.45;

  /* ---- Spacing (8px scale) ---- */
  --kt-s-1: 4px;  --kt-s-2: 8px;  --kt-s-3: 12px; --kt-s-4: 16px;
  --kt-s-5: 20px; --kt-s-6: 24px; --kt-s-8: 32px; --kt-s-10: 40px; --kt-s-12: 48px;

  /* ---- Radius ---- */
  --kt-r-1: 4px; --kt-r-2: 8px; --kt-r-3: 12px; --kt-r-4: 16px; --kt-r-pill: 999px;

  /* ---- Elevation ---- */
  --kt-shadow-1: 0 1px 2px rgba(20,23,26,.04), 0 1px 1px rgba(20,23,26,.03);
  --kt-shadow-2: 0 4px 16px rgba(20,23,26,.06), 0 2px 4px rgba(20,23,26,.04);
  --kt-shadow-3: 0 12px 40px rgba(20,23,26,.10), 0 4px 12px rgba(20,23,26,.06);

  /* ---- Motion ---- */
  --kt-ease: cubic-bezier(.2,.7,.2,1);
  --kt-dur-fast: 140ms;
  --kt-dur:      220ms;
  --kt-dur-slow: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --kt-dur-fast: 0ms; --kt-dur: 0ms; --kt-dur-slow: 0ms; }
}

/* ============================================================
   APP-LEVEL RESET (real app, not artboards)
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--kt-font-sans);
  font-feature-settings: "ss01", "cv11";
  font-size: var(--kt-fs-body);
  line-height: var(--kt-lh-body);
  color: var(--kt-ink-900);
  background: var(--kt-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--kt-cobalt-700); outline-offset: 2px; border-radius: 2px; }

/* utilities */
.kt-mono { font-family: var(--kt-font-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.kt-tap  { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.kt-scroll { overflow-y: auto; scrollbar-width: none; }
.kt-scroll::-webkit-scrollbar { display: none; }
.kt-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }