/* Frameskim design tokens. Source of truth: product/design-system.md */
@font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/Geist-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/Geist-Medium.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/Geist-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/GeistMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/GeistMono-Medium.woff2") format("woff2"); }

:root {
  --bg: #fafaf7;
  --surface: #ffffff;
  --surface-2: #f1f1ec;
  --border: #e2e2da;
  --text: #111317;
  --text-muted: #5b616b;
  --accent: #9a5b00;
  --accent-ink: #ffffff;
  --success: #16794a;
  --danger: #c4262b;
  --score: #0369a1;
  --shadow: 0 1px 1px rgb(0 0 0 / 4%), 0 8px 24px rgb(0 0 0 / 6%);

  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --radius-frame: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0d10;
    --surface: #14171c;
    --surface-2: #1c2027;
    --border: #2a2f38;
    --text: #ecedee;
    --text-muted: #9ba1ab;
    --accent: #f5a524;
    --accent-ink: #1a1204;
    --success: #3dd68c;
    --danger: #f2555a;
    --score: #7dd3fc;
    --shadow: none;
  }
}

:root[data-theme="dark"] {
  --bg: #0b0d10;
  --surface: #14171c;
  --surface-2: #1c2027;
  --border: #2a2f38;
  --text: #ecedee;
  --text-muted: #9ba1ab;
  --accent: #f5a524;
  --accent-ink: #1a1204;
  --success: #3dd68c;
  --danger: #f2555a;
  --score: #7dd3fc;
  --shadow: none;
}

/* Base components shared by screens and the landing. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.55; }
.mono, .ts { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.ts-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 2px var(--space-2) 2px 0; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font: 500 0.75rem var(--font-mono);
  border-left: 3px solid var(--accent); padding-left: var(--space-2); text-decoration: none;
}

.frame-card { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.frame-card .frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-frame); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.frame-card .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame-card .frame .ts-chip { position: absolute; left: var(--space-2); bottom: var(--space-2); background: rgb(11 13 16 / 80%); color: #ecedee; }
.frame-card p { margin: 0; font-size: 0.875rem; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.filmstrip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: var(--space-3);
  padding: var(--space-4) var(--space-3); overflow-x: auto; border-radius: var(--radius-md);
  background:
    radial-gradient(circle, var(--bg) 3px, transparent 3.5px) 0 4px / 18px 12px repeat-x,
    radial-gradient(circle, var(--bg) 3px, transparent 3.5px) 0 calc(100% - 4px) / 18px 12px repeat-x,
    #16191e;
}

.score-bar { display: flex; align-items: center; gap: var(--space-2); font: 500 0.75rem var(--font-mono); color: var(--text-muted); }
.score-bar .track { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.score-bar .fill { height: 100%; background: var(--score); }

.code-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.code-block pre { margin: 0; padding: var(--space-4); font: 0.875rem/1.6 var(--font-mono); overflow-x: auto; }
.code-block .tabs { display: flex; gap: var(--space-1); padding: var(--space-2); border-bottom: 1px solid var(--border); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-sm); font: 500 0.9375rem var(--font-sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }

.tab { padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font: 500 0.8125rem var(--font-mono); color: var(--text-muted); background: none; border: 0; }
.tab[aria-selected="true"] { background: var(--surface-2); color: var(--text); }

.callout { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent); background: var(--surface); border-radius: var(--radius-sm); font-size: 0.875rem; }