/* ==========================================================================
   KITANA — shared design system
   One source of truth for the redesign. Landing, login, onboarding and the
   student dashboard all pull tokens from here rather than each carrying its
   own copy, which is how the old system ended up with two unrelated palettes
   (see DESIGN.md: light mode was stock Tailwind, dark mode was GitHub's).

   Everything is prefixed `k-` so it can sit alongside the legacy style.css
   and admin.css during migration without collisions.
   ========================================================================== */

:root {
  /* ---- surface ---- */
  --k-canvas:   #e8e8e6;   /* grey surround the page sheet sits on */
  --k-paper:    #f6f5f2;   /* off-white page */
  --k-paper-up: #ffffff;   /* raised cards */

  /* ---- ink ---- */
  --k-ink:      #0c0c0d;
  --k-ink-soft: #3a3a3c;
  --k-ink-mute: #85858a;
  --k-rule:     #e4e2dc;

  /* ---- accent ----
     Split three ways deliberately. Yellow carries fills and marked surfaces;
     anything that must be READ as type goes black (yellow on off-white is
     1.3:1 — it cannot carry text). Black on the yellow is 17.9:1. */
  --k-accent:      #ffd400;
  --k-on-accent:   #0c0c0d;
  --k-accent-text: #0c0c0d;

  /* ---- state ----
     One vocabulary across every surface. DESIGN.md flagged that "success" was
     #22c55e for students and #38b000 for admins; these replace both. */
  --k-ok:    #1a7a3c;
  --k-warn:  #9a6206;
  --k-error: #c0271a;

  /* ---- type ---- */
  --k-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --k-logo: "Quicksand", var(--k-sans);
  --k-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- radii ---- */
  --k-r-sm:  8px;
  --k-r-md:  12px;
  --k-r-lg:  18px;
  --k-r-xl:  26px;
  --k-r-pill: 999px;

  /* ---- elevation — neutral, never tinted, never glowing ---- */
  --k-lift-sm: 0 1px 2px rgba(12,12,13,.04), 0 4px 12px rgba(12,12,13,.05);
  --k-lift-md: 0 2px 4px rgba(12,12,13,.04), 0 12px 32px rgba(12,12,13,.07);
  --k-lift-lg: 0 4px 8px rgba(12,12,13,.04), 0 24px 60px rgba(12,12,13,.09);

  /* ---- motion ---- */
  --k-ease: cubic-bezier(.2,.8,.2,1);
  --k-gutter: clamp(1.25rem, 5vw, 4rem);
}

/* ==========================================================================
   base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.k {
  margin: 0;
  background: var(--k-canvas);
  color: var(--k-ink);
  font-family: var(--k-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.k h1, .k h2, .k h3 { margin: 0; font-weight: 400; line-height: 1.06; letter-spacing: -0.035em; }
.k p { margin: 0; }
.k a { color: inherit; }
.k :focus-visible { outline: 2px solid var(--k-ink); outline-offset: 3px; border-radius: var(--k-r-sm); }

/* the page as an inset rounded sheet */
.k-sheet { background: var(--k-paper); border-radius: var(--k-r-xl); margin: 14px; overflow: clip; position: relative; }
.k-wrap  { width: min(1120px, 100% - (var(--k-gutter) * 2)); margin-inline: auto; }

/* ==========================================================================
   nav — floating glass pill
   ========================================================================== */
.k-nav {
  position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 1.6rem;
  padding: .5rem .5rem .5rem 1.35rem;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: var(--k-r-pill);
  box-shadow: var(--k-lift-md);
  max-width: calc(100% - 28px);
}
/* The wordmark is now the real asset, not type. Height drives its size;
   the mark is ~4:1 so 1.5rem tall reads ~6rem wide. */
.k-mark { display: inline-flex; align-items: center; text-decoration: none; }
.k-mark img { height: 1.5rem; width: auto; display: block; }
.k-nav-links { display: flex; gap: 1.35rem; }
.k-nav-links a { font-size: .9rem; color: var(--k-ink-soft); text-decoration: none; }
.k-nav-links a:hover { color: var(--k-ink); }

/* ==========================================================================
   buttons — feedback on press, never only on release
   ========================================================================== */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-size: .975rem; font-weight: 500; text-decoration: none;
  padding: .82rem 1.7rem; border-radius: var(--k-r-pill); border: 1px solid transparent;
  cursor: pointer;
  transition: transform 120ms var(--k-ease), background 160ms ease, border-color 160ms ease, filter 160ms ease;
}
.k-btn:active { transform: scale(.97); }
/* Doubled class (0,2,0) so these beat `.k a { color: inherit }` at (0,1,1).
   Without this every variant inherits body ink — which renders k-btn-ink as
   black text on a black pill. Keep the doubled selector when adding variants. */
.k-btn.k-btn-accent { background: var(--k-accent); color: var(--k-on-accent); box-shadow: var(--k-lift-md); }
.k-btn.k-btn-accent:hover { filter: brightness(.93); }
.k-btn.k-btn-ink    { background: var(--k-ink); color: var(--k-paper); }
.k-btn.k-btn-ink:hover { background: #000; }
.k-btn.k-btn-line   { border-color: var(--k-rule); color: var(--k-ink); background: transparent; }
.k-btn.k-btn-line:hover { border-color: var(--k-ink); }
.k-btn-sm    { font-size: .9rem; padding: .5rem 1.05rem; }

/* ==========================================================================
   surfaces
   ========================================================================== */
.k-card { background: var(--k-paper-up); border-radius: var(--k-r-lg); box-shadow: var(--k-lift-sm); padding: 1.5rem; }
.k-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--k-paper-up); border-radius: var(--k-r-pill);
  box-shadow: var(--k-lift-md); padding: .6rem 1.05rem; font-size: .83rem; white-space: nowrap;
}
.k-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--k-accent); flex: none; }

.k-eyebrow { display: inline-block; font-size: .775rem; letter-spacing: .14em; text-transform: uppercase; color: var(--k-ink-mute); }
.k-tag     { display: block; font-size: .775rem; letter-spacing: .14em; text-transform: uppercase; color: var(--k-accent-text); margin-bottom: 1.3rem; }
.k-h2      { font-size: clamp(1.9rem, 4vw, 3.1rem); max-width: 19ch; }
.k-sub     { color: var(--k-ink-mute); margin-top: 1rem; max-width: 48ch; font-size: 1.04rem; }

/* form fields — shared by login and onboarding */
.k-field { display: block; margin-bottom: 1rem; }
.k-label { display: block; font-size: .8rem; letter-spacing: .04em; color: var(--k-ink-soft); margin-bottom: .4rem; }
.k-input {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--k-ink);
  background: var(--k-paper-up); border: 1px solid var(--k-rule);
  border-radius: var(--k-r-sm); padding: .8rem .95rem;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.k-input:focus { outline: none; border-color: var(--k-ink); box-shadow: 0 0 0 3px rgba(12,12,13,.07); }
.k-input[aria-invalid="true"] { border-color: var(--k-error); }
.k-error { color: var(--k-error); font-size: .87rem; margin-top: .4rem; }

/* ==========================================================================
   motion — native scroll-driven, no library, no scroll hijacking.
   Base styles are always the SETTLED state, so a browser without
   scroll-timeline support (Firefox today) renders the finished page.
   Nothing is ever hidden behind motion.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .k-rise {
      animation: k-rise linear both;
      animation-timeline: view(block);
      animation-range: entry 4% entry 62%;
    }
    @keyframes k-rise {
      from { opacity: 0; transform: translateY(2.6rem) scale(.975); filter: blur(11px); }
      to   { opacity: 1; transform: none;                          filter: blur(0); }
    }
  }
}

@media (prefers-reduced-transparency: reduce) {
  .k-nav { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 900px) {
  .k-nav { gap: .9rem; padding-left: 1.1rem; top: 12px; width: calc(100% - 24px); justify-content: space-between; }
  .k-nav-links { display: none; }
}