/* ============================================================
   "Klart glas" design system — tokens + component library.
   See docs/REDESIGN_AUDIT.md for the brief this implements.

   Namespacing: every selector here is either a CSS custom property on
   :root, or a class prefixed `kg-`. Nothing in the legacy app (the
   inline <style> in index.html) uses the `kg-` prefix, so this file is
   purely additive — it can be linked into index.html and dev/ui.html
   without touching a single existing screen. Phase 3 is what actually
   switches a screen's markup over to these classes.

   Loaded by: frontend/index.html, frontend/dev/ui.html
   ============================================================ */

:root{
  /* ---- Color ---- */
  --brand-600:#0052CC; --brand-500:#0066FF; --brand-400:#00A3FF; --brand-300:#00C2FF;
  --mint-400:#7CFFCB; --mint-500:#3DF0B0;
  --ink-900:#0A1A2F; --ink-700:#22354F; --ink-500:#5B6B80; --ink-300:#9AA8B8;
  --surface-0:#FFFFFF; --surface-50:#F4F8FC; --surface-100:#E9F1F9; --surface-200:#D9E5F1;
  --danger-kg:#FF5C5C; --warning-kg:#FFB84D;
  /* Darker read of --danger-kg for TEXT specifically — the base danger-kg
     is only ~3:1 against white (fine for a background tint or a ≥3:1
     non-text border, found via contrast audit in docs/DESIGN.md), which
     fails AA for normal-weight text. */
  --danger-text:#C92A2A;
  --gradient-hero:linear-gradient(135deg, #00C2FF 0%, #0066FF 100%);
  --gradient-deep:linear-gradient(160deg, #0A1A2F 0%, #0A3D8F 100%);
  /* Button-safe gradient: brand-500→600 only, never touching the light-cyan
     end of --gradient-hero, so white button text always clears AA contrast
     without a case-by-case check. See the "Never white text over the light
     cyan end of the gradient" rule in the brief. */
  --gradient-btn-primary:linear-gradient(135deg, var(--brand-500), var(--brand-600));
  --glass-on-gradient-bg:rgba(255,255,255,.14);
  --glass-on-gradient-border:rgba(255,255,255,.28);
  --glass-on-light-bg:rgba(255,255,255,.65);

  /* ---- Typography ---- */
  --font-display:'Sora',sans-serif;
  --font-body:'Manrope',sans-serif;
  --fs-display:34px; --lh-display:40px;
  --fs-h1:28px; --lh-h1:34px;
  --fs-h2:22px; --lh-h2:28px;
  --fs-h3:18px; --lh-h3:24px;
  --fs-body:16px; --lh-body:24px;
  --fs-small:14px; --lh-small:20px;
  --fs-caption:12px; --lh-caption:16px;

  /* ---- Shape + space (4px base) ---- */
  --radius-card:20px; --radius-sheet:28px; --radius-input:14px; --radius-pill:999px; --radius-badge:8px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px;
  --gutter:20px;
  --shadow-raised:0 8px 24px rgba(0,102,255,.12);
  --shadow-resting:0 2px 8px rgba(10,26,47,.06);

  /* ---- Motion ---- */
  --dur-micro:150ms; --dur-standard:250ms; --dur-expressive:400ms;
  --ease-standard:cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Safe-area insets, named so call sites read as intent ---- */
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

.pt-safe{padding-top:var(--safe-top);}
.pb-safe{padding-bottom:var(--safe-bottom);}

/* Opt-in motion utilities: a component marks the elements it animates with
   these classes so the reduced-motion variant is automatic. */
.motion-safe{transition-duration:var(--dur-standard);transition-timing-function:var(--ease-standard);}
@media (prefers-reduced-motion: reduce){
  .motion-safe{transition:none !important;animation:none !important;}
  .motion-reduce-fade{transition:opacity var(--dur-standard) var(--ease-standard) !important;transform:none !important;animation:none !important;}
}

/* Base state for anything KG.staggerIn() reveals (see klart-glas.js) */
.kg-stagger-item{
  opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-standard) var(--ease-standard), transform var(--dur-standard) var(--ease-standard);
}
.kg-stagger-item.kg-in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .kg-stagger-item{transform:none !important;}
}

/* ============================================================
   Phase 2 — component library
   ============================================================ */

/* ---- Button ---- */
.kg-btn{
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-body);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  border:none;border-radius:var(--radius-pill);cursor:pointer;
  padding:0 var(--sp-6);height:48px;
  transition:transform var(--dur-micro) var(--ease-standard), opacity var(--dur-micro) var(--ease-standard);
}
.kg-btn:active{transform:scale(.97);}
.kg-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}
.kg-btn--lg{height:56px;font-size:var(--fs-h3);padding:0 var(--sp-7);}
.kg-btn--primary{background:var(--gradient-btn-primary);color:#fff;}
.kg-btn--secondary{background:var(--ink-900);color:#fff;}
.kg-btn--ghost{background:transparent;color:var(--ink-900);border:1px solid var(--surface-200);}
.kg-btn--destructive{background:var(--surface-0);color:var(--danger-text);border:1px solid var(--danger-text);}
/* Destructive is an outline, not a solid danger-colored fill: white text on
   --danger-kg fails AA contrast (~2.7:1), so a filled destructive button
   would break the brief's own contrast rule. Outline keeps full contrast
   and is a common, clear "careful" affordance for a destructive action. */

/* ---- Card / GlassCard ---- */
.kg-card{
  background:var(--surface-0);border-radius:var(--radius-card);
  padding:var(--sp-5);box-shadow:var(--shadow-resting);
}
.kg-card--raised{box-shadow:var(--shadow-raised);}
.kg-glass-card{
  border-radius:var(--radius-card);padding:var(--sp-5);
  background:var(--glass-on-gradient-bg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-on-gradient-border);
  color:var(--ink-900); /* glass lightens whatever is behind it, so dark ink text stays readable even on --gradient-hero/--gradient-deep */
}
.kg-glass-card--on-light{
  background:var(--glass-on-light-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.8);
}

/* ---- Input / Field ---- */
.kg-field{display:flex;flex-direction:column;gap:var(--sp-2);}
.kg-field-label{font-family:var(--font-body);font-weight:600;font-size:var(--fs-small);color:var(--ink-700);}
.kg-input{
  font-family:var(--font-body);font-size:var(--fs-body);color:var(--ink-900);
  background:var(--surface-0);border:1.5px solid var(--surface-200);
  border-radius:var(--radius-input);padding:0 var(--sp-4);height:48px;
  transition:border-color var(--dur-micro) var(--ease-standard);
}
.kg-input::placeholder{color:var(--ink-300);}
.kg-input:focus{outline:none;border-color:var(--brand-400);}
.kg-field--error .kg-input{border-color:var(--danger-kg);}
.kg-field-help{font-family:var(--font-body);font-size:var(--fs-caption);color:var(--ink-500);}
.kg-field-help--error{color:var(--danger-text);}

/* ---- Select (visually an input with a chevron) ---- */
.kg-select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right var(--sp-4) center;background-size:18px;
  padding-right:var(--sp-9);
}

/* ---- Chip ---- */
.kg-chip{
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-small);color:var(--ink-700);
  background:var(--surface-100);border:1px solid transparent;border-radius:var(--radius-pill);
  padding:var(--sp-2) var(--sp-4);cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-2);
  transition:background var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard);
  min-height:44px; /* touch target */
}
.kg-chip--selected{background:var(--brand-500);color:#fff;}

/* ---- Badge (booking status) ---- */
.kg-badge{
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-caption);
  border-radius:var(--radius-pill);padding:var(--sp-1) var(--sp-3);display:inline-block;
}
.kg-badge--planlagt{background:var(--surface-100);color:var(--ink-700);}
.kg-badge--bekraeftet{background:var(--brand-300);color:var(--ink-900);}
.kg-badge--udfoert{background:var(--mint-400);color:var(--ink-900);}
.kg-badge--aflyst{background:var(--surface-200);color:var(--ink-700);}

/* ---- BottomSheet ----
   Solid surface, not glass: a sheet typically carries forms/lists, and
   glass under dense body text costs more legibility+perf than it's worth
   here. Glass stays reserved for TopBar/BottomNav (floating over content)
   and GlassCard (the hero). */
.kg-sheet-backdrop{
  position:fixed;inset:0;background:rgba(10,26,47,.4);
  opacity:0;pointer-events:none;transition:opacity var(--dur-standard) var(--ease-standard);
  z-index:40;
}
.kg-sheet-backdrop.kg-open{opacity:1;pointer-events:auto;}
.kg-sheet{
  position:fixed;left:0;right:0;bottom:0;background:var(--surface-0);
  border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow:var(--shadow-raised);padding:var(--sp-6) var(--gutter) calc(var(--sp-6) + var(--safe-bottom));
  transform:translateY(100%);transition:transform var(--dur-standard) var(--ease-standard);
  z-index:41;max-height:85vh;overflow-y:auto;
}
.kg-sheet.kg-open{transform:translateY(0);}
.kg-sheet-handle{width:36px;height:4px;border-radius:var(--radius-pill);background:var(--surface-200);margin:0 auto var(--sp-5);}
@media (prefers-reduced-motion: reduce){
  .kg-sheet-backdrop, .kg-sheet{transition:opacity var(--dur-standard) var(--ease-standard) !important;}
  .kg-sheet{transform:none !important;}
}

/* ---- Tabs (segmented control) ---- */
.kg-tabs{
  display:flex;gap:var(--sp-1);background:var(--surface-100);
  border-radius:var(--radius-pill);padding:var(--sp-1);width:max-content;
}
.kg-tab{
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-small);color:var(--ink-500);
  background:transparent;border:none;border-radius:var(--radius-pill);
  padding:var(--sp-2) var(--sp-5);cursor:pointer;min-height:40px;
  transition:background var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard);
}
.kg-tab--active{background:var(--surface-0);color:var(--ink-900);box-shadow:var(--shadow-resting);}

/* ---- Toast ---- */
.kg-toast{
  position:fixed;left:var(--gutter);right:var(--gutter);
  bottom:calc(var(--sp-6) + var(--safe-bottom));
  background:var(--ink-900);color:#fff;font-family:var(--font-body);font-size:var(--fs-small);font-weight:500;
  border-radius:var(--radius-input);padding:var(--sp-4) var(--sp-5);
  box-shadow:var(--shadow-raised);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity var(--dur-standard) var(--ease-standard), transform var(--dur-standard) var(--ease-standard);
  z-index:50;
}
.kg-toast.kg-open{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .kg-toast{transform:none !important;} }

/* ---- Skeleton ---- */
.kg-skeleton{
  background:linear-gradient(90deg, var(--surface-100) 25%, var(--surface-200) 37%, var(--surface-100) 63%);
  background-size:400% 100%;border-radius:var(--radius-badge);
  animation:kg-shimmer 1.4s ease infinite;
}
@keyframes kg-shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}
@media (prefers-reduced-motion: reduce){
  .kg-skeleton{animation:none;background:var(--surface-100);}
}

/* ---- EmptyState ---- */
.kg-empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-4);padding:var(--sp-9) var(--sp-5);text-align:center;
}
.kg-empty-state svg{width:40px;height:40px;color:var(--brand-300);}
.kg-empty-state p{font-family:var(--font-body);font-size:var(--fs-body);color:var(--ink-500);}

/* ---- ListRow ---- */
.kg-list-row{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) 0;border-bottom:1px solid var(--surface-100);
  min-height:44px;cursor:pointer;
}
.kg-list-row:last-child{border-bottom:none;}
.kg-list-row-title{font-family:var(--font-body);font-weight:600;font-size:var(--fs-body);color:var(--ink-900);}
.kg-list-row-sub{font-family:var(--font-body);font-size:var(--fs-small);color:var(--ink-500);}
.kg-list-row-trailing{margin-left:auto;color:var(--ink-300);}

/* ---- PriceTag ---- */
.kg-price-tag{
  font-family:var(--font-display);font-weight:700;color:var(--ink-900);
  font-variant-numeric:tabular-nums;
}
.kg-price-tag .kg-price-unit{font-family:var(--font-body);font-weight:500;font-size:0.55em;color:var(--ink-500);margin-left:var(--sp-1);}

/* ---- AvatarCleaner ---- */
.kg-avatar{
  border-radius:50%;object-fit:cover;background:var(--surface-100);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;color:var(--ink-700);flex-shrink:0;
}
.kg-avatar--sm{width:32px;height:32px;font-size:var(--fs-caption);}
.kg-avatar--md{width:44px;height:44px;font-size:var(--fs-small);}
.kg-avatar--lg{width:64px;height:64px;font-size:var(--fs-h3);}

/* ---- TopBar ---- */
.kg-topbar{
  position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--sp-4) + var(--safe-top)) var(--gutter) var(--sp-4);
  background:var(--glass-on-light-bg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  z-index:30;
}
.kg-topbar-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);color:var(--ink-900);}

/* ============================================================
   Phase 4 — signature moments
   ============================================================ */

/* ---- 1. Clarity reveal: frosted overlay wiped away by a diagonal
   squeegee stroke on app open / after login. KG.clarityReveal() in
   klart-glas.js triggers it; reduced motion gets a plain fade. ---- */
.clarity-reveal{
  position:fixed;inset:-25%;z-index:999;
  background:rgba(244,248,252,.72);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  pointer-events:none;
  transition:transform var(--dur-expressive) var(--ease-standard), opacity var(--dur-expressive) var(--ease-standard);
}
.clarity-reveal.kg-wipe{transform:rotate(-8deg) translateX(-140%);opacity:0;}
@media (prefers-reduced-motion: reduce){
  .clarity-reveal{transition:opacity var(--dur-standard) var(--ease-standard) !important;}
  .clarity-reveal.kg-wipe{transform:none !important;}
}

/* ---- 2. Pull-to-refresh as a squeegee wipe. KG.attachPullToRefresh()
   in klart-glas.js drives --ptr-progress/--ptr-active; reduced motion
   swaps the wipe bar for a standard spinner dot animation. ---- */
.ptr-indicator{
  position:absolute;top:0;left:0;right:0;height:0;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;z-index:5;
  transition:height var(--dur-standard) var(--ease-standard);
}
.ptr-indicator.kg-pulling{transition:none;}
.ptr-wipe{
  width:60%;max-width:200px;height:4px;border-radius:var(--radius-pill);
  background:var(--gradient-btn-primary);margin-bottom:10px;
  transform-origin:left center;
  transform:scaleX(var(--ptr-progress, 0));
}
.ptr-indicator.kg-refreshing .ptr-wipe{
  animation:kg-ptr-sweep 1s var(--ease-standard) infinite;
}
@keyframes kg-ptr-sweep{
  0%{transform:scaleX(0);transform-origin:left center;}
  50%{transform:scaleX(1);transform-origin:left center;}
  50.001%{transform-origin:right center;}
  100%{transform:scaleX(0);transform-origin:right center;}
}
@media (prefers-reduced-motion: reduce){
  .ptr-wipe{display:none;}
  .ptr-indicator::after{
    content:'';width:20px;height:20px;margin-bottom:10px;border-radius:50%;
    border:2.5px solid var(--surface-200);border-top-color:var(--brand-500);
  }
  .ptr-indicator.kg-refreshing::after{animation:kg-spin .7s linear infinite;}
  @keyframes kg-spin{to{transform:rotate(360deg);}}
}

/* ---- 3. Booking confirmed: mint checkmark draws in, droplets burst
   outward and fall. KG.celebrateBookingConfirmed() triggers it;
   reduced motion shows the checkmark as a plain fade, no droplets. ---- */
.booking-confirmed-overlay{
  position:fixed;inset:0;z-index:200;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.booking-confirmed-check{
  width:84px;height:84px;border-radius:50%;background:var(--mint-400);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.6);
  transition:opacity var(--dur-expressive) var(--ease-standard), transform var(--dur-expressive) var(--ease-standard);
}
.booking-confirmed-check.kg-in{opacity:1;transform:scale(1);}
.booking-confirmed-check svg{width:40px;height:40px;color:#0b6b3d;}
.confirmed-droplet{
  position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50% 50% 50% 0;
  background:var(--brand-400);opacity:0;
  transform:translate(-50%,-50%) rotate(45deg);
}
.confirmed-droplet.kg-burst{
  opacity:1;
  animation:kg-droplet-burst var(--dur-expressive, 400ms) var(--ease-standard) forwards;
}
@keyframes kg-droplet-burst{
  0%{transform:translate(-50%,-50%) rotate(45deg) scale(0);opacity:1;}
  60%{opacity:1;}
  100%{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(45deg) scale(1);opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .booking-confirmed-check{transition:opacity var(--dur-standard) var(--ease-standard) !important;transform:none !important;}
  .confirmed-droplet{display:none;}
}

/* ---- 4. Hero-card light flare: a soft reflection sweeping across the
   home screen's active-booking glass card every ~7s. Scoped under
   .screen.active so it only runs while that screen is actually shown
   (cheaper than a JS IntersectionObserver for a single, known spot). ---- */
.home-card.active-booking{position:relative;overflow:hidden;}
.home-card.active-booking::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  pointer-events:none;
}
.screen.active .home-card.active-booking::after{
  animation:kg-flare-sweep 7s ease-in-out infinite;
}
@keyframes kg-flare-sweep{
  0%, 85%{left:-60%;}
  100%{left:140%;}
}
@media (prefers-reduced-motion: reduce){
  .home-card.active-booking::after{display:none;}
}

/* ---- BottomNav (glass, max 5 items — enforced by usage, not CSS) ---- */
.kg-bottom-nav{
  position:fixed;left:var(--gutter);right:var(--gutter);
  bottom:calc(var(--sp-4) + var(--safe-bottom));
  display:flex;justify-content:space-around;align-items:center;
  background:var(--glass-on-light-bg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-radius:var(--radius-pill);padding:var(--sp-2);
  box-shadow:var(--shadow-raised);z-index:30;
}
.kg-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:var(--font-body);font-size:10px;font-weight:600;color:var(--ink-300);
  background:none;border:none;cursor:pointer;padding:var(--sp-2) var(--sp-3);
  min-width:44px;min-height:44px;border-radius:var(--radius-pill);
  transition:color var(--dur-micro) var(--ease-standard);
}
.kg-nav-item svg{width:22px;height:22px;}
.kg-nav-item--active{color:var(--brand-500);}