/* ============================================================
   SZIGET KALAUZ — "NIGHT ISLAND" THEME
   Concept demo for Sziget Festival · sample data · not an
   official Sziget product. Original visual system inspired by
   festival energy (Island of Freedom) — does NOT use Sziget's
   real logo or proprietary typeface.

   Same token NAMES as the Kulttuuri Opas system, re-skinned:
   the shared components are driven entirely by these vars, so
   redefining them re-themes the whole app.

   Palette: deep aubergine night base + hot-magenta primary +
            electric-cyan concierge voice + acid-lime "on now".
   Type:    Anton (poster display) + Space Grotesk (UI) +
            Space Mono (meta).
============================================================ */

:root {
  /* ---- Brand primary (interactive) — was "cobalt", now MAGENTA ---- */
  --kt-cobalt-900: #4d0a30;
  --kt-cobalt-700: #ff2e7e;   /* Primary. Buttons, links, focus, brand mark. */
  --kt-cobalt-500: #ff5c9b;   /* Hover */
  --kt-cobalt-100: #6e2750;   /* Earlier-turn pick border (on dark) */
  --kt-cobalt-050: #34173a;   /* Quiet fill, cobalt-tone pills, fallback hint, earlier turn tag bg */

  /* ---- Neutrals (warm, dark) ---- */
  --kt-ink-900:    #f8eefb;   /* Primary text */
  --kt-ink-700:    #e6d6f0;   /* Headers / strong */
  --kt-ink-500:    #b69ccb;   /* Secondary text */
  --kt-ink-400:    #9078a8;   /* Hints */
  --kt-ink-300:    #6f5887;   /* Placeholder / drag handle */
  --kt-line:       #3b2452;   /* Borders */
  --kt-line-soft:  #2c1a40;   /* Internal dividers */
  --kt-sand:       #2a1840;   /* Map placeholder, quiet fills */
  --kt-paper:      #160a20;   /* App background — deep aubergine night */
  --kt-card:       #241334;   /* Card surfaces */
  --kt-overlay:    rgba(10, 4, 16, 0.66);
  --kt-frame-line: #6f5887;   /* Phone home indicator on dark */

  /* ---- Concierge & status — was "berry/sun/leaf" ---- */
  --kt-berry-700:  #1fcabf;   /* Concierge text */
  --kt-berry-500:  #2fe6db;   /* Concierge "live" voice — ELECTRIC CYAN */
  --kt-berry-050:  #0f3a3b;   /* Concierge avatar bg, picks glow */
  --kt-sun-500:    #d9f93f;   /* "On now / live tonight" — ACID LIME */
  --kt-leaf-500:   #67ef7e;   /* Free */
  --kt-leaf-050:   #15361f;   /* Free pill bg */

  /* ---- Kind hues — festival: show / stage / info ---- */
  --kt-kind-event:      #ff2e7e;   /* show — magenta */
  --kt-kind-event-bg:   #3a1530;
  --kt-kind-venue:      #2fe6db;   /* stage / place — cyan */
  --kt-kind-venue-bg:   #0f3537;
  --kt-kind-service:    #67ef7e;   /* info / service — lime */
  --kt-kind-service-bg: #16331f;

  /* ---- Type ---- */
  --kt-font-sans: "Space Grotesk", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --kt-font-mono: "Space Mono", "SF Mono", ui-monospace, monospace;
  --kt-font-display: "Anton", "Space Grotesk", system-ui, sans-serif;

  --kt-fs-display:  32px;
  --kt-fs-title:    24px;
  --kt-fs-head:     19px;
  --kt-fs-body:     16px;
  --kt-fs-small:    14px;
  --kt-fs-meta:     12px;
  --kt-fs-micro:    11px;

  --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 (darker, with a faint neon lift) ---- */
  --kt-shadow-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 1px rgba(0,0,0,.24);
  --kt-shadow-2: 0 6px 20px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.30);
  --kt-shadow-3: 0 16px 48px rgba(0,0,0,.50), 0 6px 16px rgba(0,0,0,.34);

  /* ---- 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; }
}

/* ============================================================
   PHONE-SCOPED RESET (identical structure to base system)
============================================================ */
.kt-phone {
  font-family: var(--kt-font-sans);
  color: var(--kt-ink-900);
  background: var(--kt-paper);
  height: 100%; width: 100%; overflow: hidden; position: relative;
  font-size: var(--kt-fs-body); line-height: var(--kt-lh-body);
  -webkit-font-smoothing: antialiased;
}
.kt-phone *, .kt-phone *::before, .kt-phone *::after { box-sizing: border-box; }
.kt-phone button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.kt-phone a { color: inherit; text-decoration: none; }
.kt-phone :focus-visible { outline: 2px solid var(--kt-berry-500); outline-offset: 2px; border-radius: 2px; }

.kt-phone .kt-scroll { overflow-y: auto; scrollbar-width: none; }
.kt-phone .kt-scroll::-webkit-scrollbar { display: none; }
.kt-phone .kt-tap { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }

.kt-mono { font-family: var(--kt-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ============================================================
   CANVAS-LEVEL CHROME (spec pages)
============================================================ */
.kt-spec-page {
  font-family: var(--kt-font-sans);
  color: var(--kt-ink-900);
  background: var(--kt-paper);
  padding: 32px; font-size: 14px; line-height: 1.5; height: 100%; overflow: auto;
}
.kt-spec-page h2 { font-family: var(--kt-font-display); font-weight: 400; font-size: 30px; letter-spacing: 0.5px; margin: 0 0 6px; text-transform: uppercase; }
.kt-spec-page h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--kt-berry-500); margin: 24px 0 10px; }
.kt-spec-page p  { margin: 0 0 8px; color: var(--kt-ink-700); }
.kt-spec-page .kt-mono { font-size: 12px; }
.kt-spec-page hr { border: 0; border-top: 1px solid var(--kt-line); margin: 20px 0; }
.kt-spec-page table { color: var(--kt-ink-700); }
.kt-spec-page th { color: var(--kt-ink-500); }
.kt-spec-page td { border-color: var(--kt-line-soft) !important; }

/* Display utility for festival hero type */
.kt-display { font-family: var(--kt-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; line-height: 0.95; }