@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/schibsted-400.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/schibsted-500.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/schibsted-600.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/schibsted-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plexmono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/plexmono-500.woff2") format("woff2");
}

:root {
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --pane: #F4F4F2;
  --raised: #FFFFFF;
  --line: #E4E4E1;
  --line-strong: #CFCFCA;
  --ink: #1A1A18;
  --ink-2: #55554F;
  --mute: #6B6B64;
  --action: #A83818;
  --action-ink: #FFFFFF;
  --attention: #A85E10;
  --ok: #4F7A4C;
  --check-a: #F2F2F0;
  --check-b: #E8E8E4;
  --e1: 0 1px 2px rgba(0, 0, 0, 0.20), 0 0 0 1px var(--line);
  --e2: 0 4px 12px -2px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--line);
  --e3: 0 12px 32px -8px rgba(0, 0, 0, 0.325), 0 0 0 1px var(--line-strong);

  --bar: var(--surface);
  --go: var(--action);
  --accent: var(--attention);

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  --r1: 6px;
  --r2: 10px;
  --r3: 14px;
  --r4: 20px;
  --rp: 999px;

  --sans: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --t-micro: 11px;
  --t-micro-lh: 1.4;
  --t-micro-w: 600;
  --t-micro-ls: 0.08em;
  --t-sm: 12px;
  --t-sm-lh: 1.5;
  --t-body: 14px;
  --t-body-lh: 1.55;
  --t-lead: 16px;
  --t-lead-lh: 1.5;
  --t-lead-w: 500;
  --t-h3: 20px;
  --t-h3-lh: 1.35;
  --t-h3-ls: -0.01em;
  --t-h2: 26px;
  --t-h2-lh: 1.25;
  --t-h2-ls: -0.015em;
  --t-h1: 34px;
  --t-h1-lh: 1.15;
  --t-h1-ls: -0.02em;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fast: 120ms;
  --base: 180ms;
  --slow: 260ms;

  --cmdbar-h: 56px;
  --control-h: 44px;
  --prompt-min: 80px;
  --login-w: 400px;
  --page-max: 1100px;
  --queue-w: 240px;
  --params-w: 280px;
  --thumb-w: 48px;
  --thumb-h: 64px;
  --icon: 18px;
  --icon-lg: 48px;
  --thumb-min: 160px;
  --thumb-img-h: 180px;
  --char-w: 120px;
  --char-h: 160px;
  --hero-w: 220px;
  --hero-h: 300px;
  --shot-meta: 110px;
  --shot-status: 90px;
  --shot-cost: 60px;
  --bw: 1px;
  --mark: 2px;
  --focus-w: 3px;
  --nudge: 1px;
  --dot: 6px;
  --off: 0.35;
  --halo: 0.06;
  --sweep: 1.4s;
  --pulse: 1.6s;
  --focus: color-mix(in srgb, var(--action) 20%, transparent);
}

:root[data-theme="dark"] {
  --bg: #0A0A0B;
  --surface: #131316;
  --pane: #1A1A1F;
  --raised: #22222A;
  --line: #2A2A33;
  --line-strong: #3D3D47;
  --ink: #F2F2F4;
  --ink-2: #A8A8B3;
  --mute: #7A7A86;
  --action: #C2461F;
  --action-ink: #FFFFFF;
  --attention: #E8A050;
  --ok: #6EA36A;
  --check-a: #121214;
  --check-b: #0C0C0E;
  --e1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 0 0 1px var(--line);
  --e2: 0 4px 12px -2px rgba(0, 0, 0, 0.50), 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --e3: 0 12px 32px -8px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--line-strong), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A0B;
    --surface: #131316;
    --pane: #1A1A1F;
    --raised: #22222A;
    --line: #2A2A33;
    --line-strong: #3D3D47;
    --ink: #F2F2F4;
    --ink-2: #A8A8B3;
    --mute: #7A7A86;
    --action: #C2461F;
    --action-ink: #FFFFFF;
    --attention: #E8A050;
    --ok: #6EA36A;
    --check-a: #121214;
    --check-b: #0C0C0E;
    --e1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 0 0 1px var(--line);
    --e2: 0 4px 12px -2px rgba(0, 0, 0, 0.50), 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --e3: 0 12px 32px -8px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--line-strong), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}