/*
 * Folgpris v2 Design Tokens
 *
 * Configurable roundness via [data-roundness] on <html>:
 *   "sharp"   — minimal rounding, business-like
 *   "default" — moderate rounding, balanced (default)
 *   "round"   — maximum rounding, playful
 *
 * Usage in Tailwind: rounded-v-sm, rounded-v-md, rounded-v-lg, rounded-v-xl, rounded-v-pill
 * Usage in raw CSS:  border-radius: var(--r-lg);
 */

/* ── Link reset (prevents blue flash before Tailwind loads) ── */
a { color: inherit; text-decoration: none; }

/* ── Base tokens (default = moderate roundness) ─────────────── */
:root {
  /* Roundness scale — "default" preset */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Warm palette */
  --cream:   #FAF1E2;
  --cream-2: #F4E9D5;
  --paper:   #FFFFFF;
  --ink:     #0A0A0A;
  --ink-2:   #1A1A1A;
  --muted:   #574E45;
  --muted-2: #7A7269;
  --line:    #E8DDC9;
  --line-strong: #CFBE9E;
  --line-2:  #EFE6D3;

  /* Accent colors */
  --blue:      #1B5BFF;
  --blue-ink:  #0E3FBF;
  /* Link/text-on-surface variant of --blue. Equals --blue in light mode so
     nothing changes there; lightened in the .dark block so blue text stays
     legible on dark surfaces without touching --blue's use as a button
     background (white-on-blue would break if --blue itself were lightened). */
  --blue-link: var(--blue);
  --green:     #16A34A;
  --green-soft:#DCF7E6;
  --red:       #DC2626;
  --red-soft:  #FEE7E7;
  --amber:     #B6740C;
  --amber-soft:#FBE9C2;
  /* --amber is a fill/dot colour: on --amber-soft it lands at ~3.2:1, which fails
     AA for the 10-11px text in pills and badges. --amber-ink is the text pairing. */
  --amber-ink: #6E4405;
  --purple:    #7C3AED;
  --purple-soft:#EFE5FF;

  /* Hover fill for --paper controls that sit directly ON the page (--cream)
     background, e.g. the oppdrag filter chips and the show-more button.
     --cream-2 is a paper-relative tint that near-matches the page itself in
     both modes, so hovering to it makes the control dissolve (issue #1968).
     Must stay distinct from both --paper and --cream in both palettes. */
  --hover-on-cream: #E8DDC9;

  /* Disabled/in-progress button state. A dedicated pair because --muted-2 is
     a text token whose dark value is *light* — unsafe as a background under
     hardcoded white text. Both pairings meet WCAG AA (light 4.7:1, dark 6.2:1). */
  --btn-disabled-bg:   #7A7269;
  --btn-disabled-text: #FFFFFF;

  /* Shadows */
  --shadow-card: 0 1px 0 rgba(20,16,8,.04), 0 6px 14px -8px rgba(20,16,8,.08);
  --shadow-pop:  0 4px 0 rgba(20,16,8,.04), 0 18px 40px -16px rgba(20,16,8,.18);
}

/* ── Roundness presets ──────────────────────────────────────── */

[data-roundness="sharp"] {
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-pill: 20px;
}

[data-roundness="round"] {
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;
}

/* ── Dark mode overrides ────────────────────────────────────── */
.dark {
  --cream:   #111111;
  --cream-2: #1A1A1A;
  --paper:   #1E1E1E;
  --ink:     #F5F0E6;
  --ink-2:   #E8E0D0;
  --muted:   #9A9189;
  /* Tertiary text needs to stay legible on the dark surfaces (#111/#1E1E1E);
     the old #6B6258 sat at APCA Lc ~20 and was effectively unreadable. */
  --muted-2: #C2B8AD;
  --line:    #555048;
  --line-strong: #6E675D;
  --line-2:  #4A4540;

  /* Accent text tokens re-tinted for dark surfaces (the light-mode values sat
     at APCA Lc ~25-34 as text on #111/#1E1E1E). --blue itself is NOT re-tinted
     (it doubles as an accent *background* under white button text); the
     --blue-link variant below carries the lighter link/text colour instead. */
  --red:       #FCA5A5;
  --amber:     #F0B429;
  --amber-ink: #FCD34D;
  --blue-link: #9BB8FF;
  --green-soft:#122b1a;
  --red-soft:  #2a1515;
  --amber-soft:#2a2010;
  --purple:    #a78bfa;
  --purple-soft:#1e1530;

  /* Lighter than --paper (#1E1E1E), clearly apart from the #111 page; the
     dark --line (#555048) would be too bright a jump for a hover tint. */
  --hover-on-cream: #2E2E2E;

  --btn-disabled-bg:   #3A3530;
  --btn-disabled-text: #C2B8AD;

  --shadow-card: 0 1px 0 rgba(0,0,0,.2), 0 6px 14px -8px rgba(0,0,0,.4);
  --shadow-pop:  0 4px 0 rgba(0,0,0,.2), 0 18px 40px -16px rgba(0,0,0,.5);
}

/* ── V2 component styles ────────────────────────────────────── */

/* Cards */
.v2-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}

/* Pills / Badges */
.v2-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  /* Pills are single-phrase labels; never break them mid-word in narrow
     grid columns (e.g. "Midle rtidig problem" on mobile). */
  white-space: nowrap;
}

.v2-pill-sm {
  padding: 2px 8px;
  font-size: 10px;
}

.v2-pill-dark    { background: var(--ink); color: #fff; }
.v2-pill-blue    { background: #E2EAFF; color: var(--blue-ink); }
.v2-pill-green   { background: var(--green-soft); color: #0a6d2f; }
.v2-pill-red     { background: var(--red-soft); color: #9a1c1c; }
.v2-pill-amber   { background: var(--amber-soft); color: var(--amber-ink); }
.v2-pill-purple  { background: var(--purple-soft); color: #5b21b6; }
.v2-pill-outline { background: transparent; border: 1px solid var(--line-strong); color: var(--muted); }

.dark .v2-pill-blue   { background: rgba(27,91,255,.15); color: #93b4ff; }
.dark .v2-pill-green  { background: rgba(22,163,74,.15); color: #6ee7a0; }
.dark .v2-pill-red    { background: rgba(220,38,38,.15); color: #fca5a5; }
.dark .v2-pill-amber  { background: rgba(182,116,12,.15); color: var(--amber-ink); }
.dark .v2-pill-dark   { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.dark .v2-pill-purple { background: rgba(124,58,237,.15); color: #c4b5fd; }

/* Alert banners (Django messages) */
.v2-alert-success  { background: var(--green-soft); border: 1px solid #bbf7d0; color: #166534; }
.v2-alert-error    { background: var(--red-soft); border: 1px solid #fecaca; color: #991b1b; }
.v2-alert-warning  { background: var(--amber-soft); border: 1px solid #fde68a; color: #92400e; }
.v2-alert-info     { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }

.dark .v2-alert-success { background: rgba(22,163,74,.15); border-color: rgba(22,163,74,.25); color: #86efac; }
.dark .v2-alert-error   { background: rgba(220,38,38,.15); border-color: rgba(220,38,38,.25); color: #fca5a5; }
.dark .v2-alert-warning { background: rgba(182,116,12,.15); border-color: rgba(182,116,12,.25); color: #fcd34d; }
.dark .v2-alert-info    { background: rgba(27,91,255,.15); border-color: rgba(27,91,255,.25); color: #93b4ff; }

/* Status dots */
.v2-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.v2-dot-green { background: var(--green); }
.v2-dot-red   { background: var(--red); }
.v2-dot-amber { background: var(--amber); }
.v2-dot-grey  { background: var(--muted-2); }

/* Stat tiles */
.v2-stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v2-stat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
}

.v2-stat-value {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}

.v2-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--cream-2);
  color: var(--ink);
  align-self: flex-start;
  margin-bottom: 2px;
}

/* Choice: one option of a radio group, as a bordered row on a paper card.
   The native radio keeps keyboard and screen-reader behaviour; the row
   highlights when its radio is checked. */
.v2-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.v2-choice:hover { background: var(--cream-2); }
.v2-choice:has(> input:checked) { border-color: var(--blue); }
.v2-choice > input[type="radio"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--blue);
  cursor: pointer;
}
.v2-choice > input[type="radio"]:focus-visible {
  outline: 2px solid var(--blue-link);
  outline-offset: 2px;
}

/* Tabs (segmented control) */
.v2-tabs {
  display: inline-flex;
  gap: 4px;
  background: rgba(10,10,10,.05);
  padding: 4px;
  border-radius: var(--r-pill);
}
.v2-tabs button {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--muted);
}
.v2-tabs button.active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.dark .v2-tabs { background: rgba(255,255,255,.06); }

/* Big hero input */
.v2-big-input {
  display: flex;
  align-items: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 8px 8px 8px 24px;
  gap: 12px;
  box-shadow: var(--shadow-card);
}
.v2-big-input input {
  flex: 1;
  /* Number inputs have a wide intrinsic min-width that overflows 320px
     viewports; let the flex item shrink instead. */
  min-width: 0;
  border: 0;
  outline: 0;
  font-size: 16px;
  background: transparent;
  font-family: inherit;
  color: var(--ink);
  padding: 10px 0;
}
.v2-big-input input::placeholder { color: var(--muted-2); }

/* Feedback FAB */
.v2-fab {
  position: fixed;
  left: 24px;
  bottom: 24px;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  border: 0;
  font-family: inherit;
  z-index: 50;
  transition: background .12s ease;
}
.v2-fab:hover { background: #222; }

.dark .v2-fab { background: var(--ink); color: #111111; }
.dark .v2-fab:hover { background: #FFFFFF; }

/* Utility: monospace label */
.v2-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

/* Utility: section label */
.v2-section-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted-2);
  text-transform: uppercase;
}

/* Keyboard shortcut badge */
.v2-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 2px 6px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-2);
}

/* Page wrappers */
.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 40px 80px;
}
.page-narrow {
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px 40px 80px;
}
@media (max-width: 768px) {
  .page, .page-narrow {
    padding: 8px 16px 60px;
  }
}