@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter.ttf") format("truetype");
}

:root {
  --fylark-arena: #f3f1eb;
  --fylark-paper: #fffdf8;
  --fylark-card: rgba(255, 253, 248, .72);
  --fylark-ink: #071f3d;
  --fylark-ink-soft: #526074;
  --fylark-blue: #2563a0;
  --fylark-blue-strong: #0d356f;
  --fylark-line: rgba(13, 53, 111, .14);
  --fylark-gold: #d7ad6a;
  --fylark-ease: cubic-bezier(.22, 1, .36, 1);
}

html {
  background: var(--fylark-arena);
}

body.legal-surface,
body.admin-surface {
  background:
    radial-gradient(72% 92% at 104% 14%, rgba(37, 99, 160, .16), transparent 60%),
    radial-gradient(58% 72% at -8% 22%, rgba(215, 173, 106, .13), transparent 62%),
    linear-gradient(135deg, #f7f5ef 0%, #f3f1eb 45%, #edf2f5 100%);
  color: var(--fylark-ink);
  color-scheme: light;
}

body.legal-surface::before,
body.admin-surface::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, .42) 49%, transparent 57% 100%),
    repeating-linear-gradient(90deg, transparent 0 62px, rgba(13, 53, 111, .028) 63px, transparent 64px);
  opacity: .72;
}

body.legal-surface .bg,
body.admin-surface .bg {
  opacity: .72;
  mix-blend-mode: multiply;
}

body.legal-surface .field,
body.admin-surface .field,
body.admin-surface .bg .field {
  background:
    radial-gradient(34% 44% at 18% 18%, rgba(215, 173, 106, .22), transparent 62%),
    radial-gradient(34% 48% at 86% 18%, rgba(37, 99, 160, .2), transparent 64%),
    radial-gradient(45% 54% at 64% 100%, rgba(48, 128, 204, .11), transparent 66%) !important;
}

body.legal-surface .vignette {
  background: radial-gradient(circle at 48% 24%, transparent 42%, rgba(243, 241, 235, .9) 100%);
}

body.legal-surface .grain {
  opacity: .035;
  mix-blend-mode: multiply;
}

body.legal-surface main {
  max-width: min(1120px, calc(100vw - 44px));
  display: grid;
  grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
  column-gap: clamp(44px, 6vw, 74px);
  align-items: start;
  padding-bottom: clamp(32px, 6vh, 72px);
}

body.legal-surface .brand {
  grid-column: 1;
  margin: 0 0 22px;
  color: var(--fylark-blue-strong);
}

body.legal-surface .brand-mark {
  display: none;
}

body.legal-surface .brand-name {
  font-family: "Inter", "Schibsted Grotesk", system-ui, sans-serif;
  font-size: clamp(2.6rem, 6vw, 4.9rem);
  line-height: 1;
  letter-spacing: 0;
  background: none;
  color: var(--fylark-blue-strong);
}

body.legal-surface .page-head {
  grid-column: 1;
  position: sticky;
  top: clamp(26px, 7vh, 64px);
  margin: 0;
}

body.legal-surface h1 {
  max-width: 12ch;
  font-family: "Inter", "Schibsted Grotesk", system-ui, sans-serif;
  font-size: clamp(2.1rem, 3.7vw, 3.35rem);
  line-height: .98;
  letter-spacing: 0;
  color: var(--fylark-ink);
  background: none;
}

body.legal-surface .sub {
  max-width: 24ch;
  margin-top: 1.05rem;
  color: rgba(13, 53, 111, .72);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .13em;
  line-height: 1.55;
  text-transform: uppercase;
}

body.legal-surface .card,
body.legal-surface section {
  grid-column: 2;
  border: 1px solid var(--fylark-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, .82), rgba(250, 247, 240, .68)),
    linear-gradient(135deg, rgba(37, 99, 160, .055), transparent 58%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 32px 90px rgba(46, 37, 22, .11),
    inset 0 1px 0 rgba(255, 255, 255, .8);
}

body.legal-surface h2 {
  color: var(--fylark-ink);
  font-size: .94rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

body.legal-surface h2::before {
  width: 7px;
  height: 7px;
  background: var(--fylark-blue);
  box-shadow: 0 0 16px rgba(48, 128, 204, .22);
}

body.legal-surface p,
body.legal-surface li,
body.legal-surface .note {
  color: rgba(7, 31, 61, .72);
}

body.legal-surface strong {
  color: var(--fylark-ink);
  font-weight: 780;
}

body.legal-surface a {
  color: var(--fylark-blue-strong);
  text-decoration-color: rgba(13, 53, 111, .28);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.legal-surface li::before {
  background: var(--fylark-blue);
}

body.legal-surface .back {
  grid-column: 2;
  width: fit-content;
  border-color: var(--fylark-line);
  background: rgba(255, 253, 248, .7);
  color: var(--fylark-blue-strong);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

body.legal-surface .note {
  grid-column: 2;
}

body.legal-surface .pill,
body.legal-surface textarea {
  border-color: var(--fylark-line);
  background: rgba(255, 253, 248, .78);
  color: var(--fylark-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

body.legal-surface .pill input,
body.legal-surface textarea {
  color: var(--fylark-ink);
}

body.legal-surface .pill:has(input[aria-invalid="true"]),
body.legal-surface textarea[aria-invalid="true"] {
  border-color: rgba(156, 37, 31, .48);
  box-shadow:
    0 0 0 4px rgba(156, 37, 31, .08),
    inset 0 1px 0 rgba(255,255,255,.72);
}

body.legal-surface .pill input::placeholder,
body.legal-surface textarea::placeholder {
  color: rgba(82, 96, 116, .72);
}

body.legal-surface .btn {
  color: #fff;
  background: linear-gradient(180deg, #2d7dc3, #1d5e9f);
  box-shadow: 0 14px 34px rgba(37, 99, 160, .22), inset 0 1px 0 rgba(255,255,255,.34);
}

body.legal-surface .msg.err {
  color: #9b1c28;
}

body.legal-surface .msg.ok {
  color: #12643f;
}

body.admin-surface {
  --bg: #f3f1eb;
  --ink: #071f3d;
  --ink-dim: #526074;
  --ink-faint: rgba(82, 96, 116, .76);
  --line: rgba(13, 53, 111, .14);
  --line-soft: rgba(13, 53, 111, .09);
  --a: #2563a0;
  --b: #3080cc;
  --ok: #12643f;
  --warn: #9a641f;
  --bad: #9b1c28;
}

body.admin-surface .bg .glow {
  background: radial-gradient(circle, rgba(48, 128, 204, .18), rgba(215, 173, 106, .08) 48%, transparent 72%);
  filter: blur(24px);
}

body.admin-surface .bg .halo {
  opacity: .14;
  background: conic-gradient(from 14deg, transparent 0deg, rgba(37,99,160,.46) 110deg, rgba(215,173,106,.34) 168deg, transparent 238deg, transparent 360deg);
}

body.admin-surface .bg .grid {
  opacity: .2;
  background-image: linear-gradient(rgba(13,53,111,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(13,53,111,.06) 1px, transparent 1px);
}

body.admin-surface .card-login,
body.admin-surface .modal-card,
body.admin-surface section.card,
body.admin-surface .kpi,
body.admin-surface .comp,
body.admin-surface .security-strip span {
  border-color: var(--fylark-line);
  background:
    linear-gradient(180deg, rgba(255,253,248,.78), rgba(250,247,240,.64)),
    linear-gradient(135deg, rgba(37,99,160,.045), transparent 58%);
  box-shadow:
    0 28px 80px rgba(46,37,22,.1),
    inset 0 1px 0 rgba(255,255,255,.76);
}

body.admin-surface .card-login {
  border-radius: 8px;
}

body.admin-surface .brand h1,
body.admin-surface .card-login h1,
body.admin-surface .modal-card h2,
body.admin-surface section.card h2,
body.admin-surface .kpi .n {
  color: var(--fylark-ink);
}

body.admin-surface .login-rail,
body.admin-surface input[type=text],
body.admin-surface input[type=password],
body.admin-surface .filters input[type=search],
body.admin-surface .filters select,
body.admin-surface .filters input[type=date],
body.admin-surface .tag,
body.admin-surface .tbtn {
  border-color: var(--fylark-line);
  background: rgba(255, 253, 248, .72);
  color: var(--fylark-ink);
}

body.admin-surface input:focus,
body.admin-surface .filters input:focus,
body.admin-surface .filters select:focus {
  background: rgba(255, 253, 248, .92);
  border-color: rgba(37, 99, 160, .52);
}

body.admin-surface .btn {
  color: #fff;
  background: linear-gradient(180deg, #2d7dc3, #1d5e9f);
  box-shadow: 0 12px 28px rgba(37,99,160,.2), inset 0 1px 0 rgba(255,255,255,.28);
}

body.admin-surface .btn.ghost {
  color: var(--fylark-blue-strong);
  background: rgba(255,253,248,.7);
}

body.admin-surface .tabs {
  border-bottom-color: var(--fylark-line);
}

body.admin-surface .tab {
  color: rgba(82, 96, 116, .78);
}

body.admin-surface .tab.active {
  color: var(--fylark-ink);
  border-bottom-color: var(--fylark-blue);
}

body.admin-surface table {
  color: var(--fylark-ink);
}

body.admin-surface th {
  color: rgba(82, 96, 116, .82);
}

body.admin-surface td.muted,
body.admin-surface .muted,
body.admin-surface .note,
body.admin-surface .gen,
body.admin-surface .hint,
body.admin-surface .login-rail,
body.admin-surface label {
  color: var(--fylark-ink-soft);
}

body.admin-surface .toast {
  background: rgba(255,253,248,.94);
  border-color: var(--fylark-line);
  color: var(--fylark-ink);
}

@media (max-width: 760px) {
  body.legal-surface {
    padding: 28px 18px 46px;
  }

  body.legal-surface main {
    max-width: 100%;
    display: block;
  }

  body.legal-surface .brand {
    margin-bottom: 24px;
  }

  body.legal-surface .brand-name {
    font-size: clamp(2.7rem, 18vw, 5.4rem);
  }

  body.legal-surface .page-head {
    position: static;
    margin-bottom: 22px;
  }

  body.legal-surface h1 {
    max-width: 10ch;
    font-size: clamp(2rem, 12vw, 3.6rem);
  }

  body.legal-surface .sub {
    max-width: 32ch;
  }

  body.legal-surface .card,
  body.legal-surface section {
    padding: 1.25rem;
  }

  body.legal-surface .pill {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
  }

  body.legal-surface .pill input,
  body.legal-surface .btn {
    width: 100%;
  }

  body.admin-surface .login {
    padding: 18px;
  }

  body.admin-surface .card-login {
    padding: 26px 22px 24px;
  }
}