/* =========================================================================
   klikt. design tokens and shared styles
   Source: Figma "Klikt" (landing page, node 1:2). Reuse these for every
   klikt screen instead of hard-coded values.
   ========================================================================= */

/* Fonts via Adobe Fonts kit hss1esg. Every page that uses these styles
   loads the kit in its <head>: <link rel="stylesheet" href="https://use.typekit.net/hss1esg.css">
   (the kit's allowed domains must include the site's domain).
   - Display: Obviously Wide Medium, for titles, headings and big buttons.
   - Text: Obviously (normal width) Regular, for running text, labels and small controls.
   Kit hss1esg serves exactly these two: "obviously" 400 and "obviously-wide" 500.
   Ask for no other weights: font-synthesis is off, so they would just fall back to the nearest one. */

:root {
  /* ---- colour ---- */
  --k-cream: #fef7eb;        /* page background, logo outline */
  --k-ink: #000000;          /* text on cream */
  --k-white: #ffffff;
  --k-coral: #f05f35;        /* logo, accent */
  --k-blue: #4458a7;         /* primary button */
  --k-blue-press: #36478c;
  --k-pink: #eba2c7;         /* ribbon / toggle track */
  --k-sparkle: #e1e65d;      /* sparkle stars */
  --k-glass: rgba(255, 255, 255, .5); /* selected pill on a coloured surface */

  /* ---- type ---- */
  --k-font-display: "obviously-wide", "Obviously Wide", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --k-font-text: "obviously", "Obviously", "obviously-wide", "Obviously Wide", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --k-font: var(--k-font-display);  /* kept for older rules: means display */
  --k-weight: 500;           /* Wide Medium (display) */
  --k-weight-text: 400;      /* Obviously Regular (running text) */
  --k-weight-text-strong: 400; /* labels and chips: the kit only has Obviously Regular; set to 500 once Medium is added */
  --k-tracking: -0.05em;     /* display: -1.25px at 25px, -0.8px at 16px, -0.7px at 14px */
  --k-tracking-text: -0.01em; /* text: normal width needs far less tightening */

  --k-text-title: 25px;  --k-lh-title: 1.2;
  --k-text-lead: 16px;   --k-lh-lead: 1.3;
  --k-text-body: 14px;   --k-lh-body: 1.3;
  --k-text-label: 16px;  --k-lh-label: .9;
  --k-text-button: 14px; --k-lh-button: 1;

  /* ---- shape ---- */
  --k-radius-button: 24px;
  --k-radius-pill: 50px;
  --k-photo-border: 11px;
  --k-tilt-photo: -5.26deg;
  --k-tilt-ribbon: 2.93deg;

  /* ---- shadow (Figma effect styles) ---- */
  --k-shadow-surface: 0 4px 34px 10px rgba(69, 57, 13, .25);   /* "shadow on surface" */
  --k-shadow-button: 0 0 34px 6px rgba(69, 57, 13, .25);       /* "Shadow button" */

  /* ---- space ---- */
  --k-gutter: 22px;
  --k-page-max: 440px;

  /* ---- motion ---- */
  --k-spring: cubic-bezier(.3, 1.6, .5, 1);
  --k-ease: cubic-bezier(.3, .1, .3, 1);
}

/* ---- base ---- */
html:has(.k-page) { overflow-x: clip; }
.k-page {
  margin: 0;
  min-height: 100vh; min-height: 100dvh;
  background: var(--k-cream);
  color: var(--k-ink);
  font-family: var(--k-font-text);
  font-weight: var(--k-weight-text);
  letter-spacing: var(--k-tracking-text);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ---- text styles ---- */
.k-title { font-family: var(--k-font-display); font-size: var(--k-text-title); line-height: var(--k-lh-title); font-weight: var(--k-weight); letter-spacing: var(--k-tracking); margin: 0; text-wrap: balance; }
.k-lead  { font-size: var(--k-text-lead);  line-height: var(--k-lh-lead);  margin: 0; text-wrap: balance; }
.k-body  { font-size: var(--k-text-body);  line-height: var(--k-lh-body);  margin: 0; text-wrap: balance; }
.k-label { font-size: var(--k-text-label); line-height: var(--k-lh-label); font-weight: var(--k-weight-text-strong); }
.k-display { font-family: var(--k-font-display); font-weight: var(--k-weight); letter-spacing: var(--k-tracking); }

/* ---- primary button ---- */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 232px; padding: 20px 38px;
  border: 0; border-radius: var(--k-radius-button);
  background: var(--k-blue); color: var(--k-white);
  font: var(--k-weight) var(--k-text-button)/var(--k-lh-button) var(--k-font-display); letter-spacing: var(--k-tracking);
  text-decoration: none; cursor: pointer;
  box-shadow: var(--k-shadow-button);
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--k-spring), background-color .15s;
}
.k-btn:hover { transform: translateY(-2px) scale(1.03); }
.k-btn:active { transform: scale(.95); background: var(--k-blue-press); transition-duration: .06s; }
.k-btn:focus-visible { outline: 3px solid var(--k-coral); outline-offset: 4px; }

/* ---- photo card: white border, tilted, surface shadow ---- */
.k-photo {
  position: relative; overflow: hidden; box-sizing: border-box;
  width: 300px; aspect-ratio: 300 / 384;
  border: var(--k-photo-border) solid var(--k-white);
  background: var(--k-white);
  box-shadow: var(--k-shadow-surface);
  transform: rotate(var(--k-tilt-photo));
}
.k-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- ribbon: full-bleed tilted band ---- */
.k-ribbon {
  display: flex; align-items: center; justify-content: center;
  width: calc(100% + 80px); margin-inline: -40px;
  padding: 8px 40px;
  background: var(--k-pink);
  transform: rotate(var(--k-tilt-ribbon));
}

/* ---- toggle: two options, the selected one sits in a glass pill ---- */
.k-toggle { position: relative; display: inline-grid; grid-auto-flow: column; gap: 40px; align-items: center; }
.k-toggle button {
  position: relative; z-index: 1;
  border: 0; background: none; cursor: pointer;
  padding: 18px; border-radius: var(--k-radius-pill);
  font: var(--k-weight) var(--k-text-label)/var(--k-lh-label) var(--k-font-display); letter-spacing: var(--k-tracking);
  color: var(--k-white); white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s;
}
.k-toggle button[aria-pressed="true"] { color: var(--k-ink); }
.k-toggle button:focus-visible { outline: 3px solid var(--k-blue); outline-offset: 2px; }
.k-toggle__pill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  border-radius: var(--k-radius-pill); background: var(--k-glass);
  transition: transform .35s var(--k-spring), width .35s var(--k-spring);
}

/* ---- sparkle ---- */
.k-sparkle { position: absolute; display: block; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .k-btn, .k-toggle__pill, .k-toggle button { transition: none; }
}