/* ============================================================
   Kvart / Koordis — design tokens
   One system, two surface palettes (dark = agency, light = resident).
   Spacing: 8-pt. Radius: exactly two. Elevation: exactly one.
   ============================================================ */

:root {
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter Tight', ui-sans-serif, system-ui, sans-serif;

  /* the only two radii in the system */
  --r-control: 10px;   /* buttons, inputs, badges */
  --r-surface: 14px;   /* cards, panels */

  /* brand constants (do not flip with theme) */
  --indigo:       #6366F1;
  --indigo-light: #8B8DF6;
  --honey:        #F59E0B;

  /* priority semantics (P1–P4) */
  --p1: #EF4444;
  --p2: #F59E0B;
  --p3: #6366F1;
  --p4: #22C55E;
}

/* ── Agency surface: dark / technical ───────────────────────── */
[data-theme="dark"] {
  --canvas:     #0C111D;
  --canvas-2:   #0E1424;
  --surface:    #151C2E;
  --surface-2:  #1B243A;
  --ink:        #F6F8FC;
  --ink-soft:   #94A3B8;
  --ink-faint:  #64748B;
  --line:       #263047;
  --accent:      #6366F1;
  --accent-hover:#7C7FF4;
  --accent-text: #A5A8FF;   /* indigo legible on dark */
  --accent-2:    #8B8DF6;
  --shadow: 0 1px 2px rgba(0,0,0,.30), 0 18px 40px -20px rgba(0,0,0,.55);
}

/* ── Resident surface: light / warm / human ─────────────────── */
[data-theme="light"] {
  --canvas:     #FFFFFF;
  --canvas-2:   #F6F8FC;
  --surface:    #FFFFFF;
  --surface-2:  #F6F8FC;
  --ink:        #0C111D;
  --ink-soft:   #52617A;
  --ink-faint:  #8B97AC;
  --line:       #E6E9F0;
  --accent:      #6366F1;
  --accent-hover:#4F52E0;
  --accent-text: #4F46E5;   /* indigo legible on light */
  --accent-2:    #F59E0B;   /* honey — resident warmth */
  --shadow: 0 1px 2px rgba(12,17,29,.05), 0 16px 36px -20px rgba(12,17,29,.18);
}

/* ── Base ───────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .font-display { font-family: var(--font-display); letter-spacing: -0.02em; }

/* ── Buttons (no lift, no flashlight shadow) ────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 600; font-size: .9375rem; line-height: 1;
  padding: .875rem 1.375rem; border-radius: var(--r-control);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); }
.btn-sm { padding: .625rem 1rem; font-size: .875rem; }

/* ── Surfaces ───────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
}
.card-flat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surface); }

/* ── Bits ───────────────────────────────────────────────────── */
.kicker {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text);
}
.tag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border-radius: var(--r-control);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: .8125rem; font-weight: 500; color: var(--ink-soft);
}
.field {
  width: 100%; border-radius: var(--r-control);
  padding: .8125rem 1rem; font-size: .9375rem; font-family: var(--font-body);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); transition: border-color .18s ease;
}
.field::placeholder { color: var(--ink-faint); }
.field:focus { outline: none; border-color: var(--accent); }
.hairline { border-color: var(--line); }

/* ── Single scroll-reveal (the only decorative motion) ──────── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ── Loading state for async submit buttons ─────────────────── */
.btn[data-loading="true"] { pointer-events: none; opacity: .75; }
.btn[data-loading="true"] .btn-label { visibility: hidden; }
.btn[data-loading="true"]::after {
  content: ""; position: absolute; width: 1rem; height: 1rem;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
.btn[data-loading="true"] { position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Generic inline spinner (dashboard submit buttons swap their content for this) */
.spin {
  display: inline-block; width: 1rem; height: 1rem;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px;
}
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn[data-loading="true"]::after { animation: none; }
}