/*
 * theme.css — Binderly design tokens.
 * Swiss / ledger mood: warm paper ground, deep navy ink-stamp accent,
 * hairline borders, zero radius, no shadow, small-capitals detailing.
 */

:root {
  --canvas: #f6f4ef;
  --surface: #fbfaf8;
  --surface-2: #eeebe1;
  --border: #ddd7c9;
  --border-strong: #b7ae9a;
  --ink: #171a1f;
  --muted: #676869;
  --accent: #16304b;
  --accent-hover: #1f3f61;
  --accent-ink: #ffffff;
  --accent-text: #1f3a5c;
  --accent-strong: #16304b;
  --accent-soft: #e2e7ec;
  --accent-border: #b6c4d3;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfe9e0;
  --success-strong: #146c34;
  --warning: #93530a;
  --warning-ink: #ffffff;
  --warning-soft: #f1e3d1;
  --warning-strong: #7c4708;
  --danger: #a3271e;
  --danger-ink: #ffffff;
  --danger-soft: #f2dfdc;
  --danger-strong: #8c211a;
  --chart-1: #16304b;
  --chart-2: #8a6d3b;
  --chart-3: #5c6b73;
  --chart-4: #7c3f3f;
  --chart-5: #3f6b5c;
  --chart-6: #6b5c8a;

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.05em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 1px 0 var(--border-strong);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --caps: uppercase;
  --caps-tracking: 0.04em;
  --btn-weight: 600;
  --measure: 68ch;
}

html[data-theme="dark"] {
  --canvas: #11151b;
  --surface: #161b22;
  --surface-2: #1d232c;
  --border: #2b323d;
  --border-strong: #3c4553;
  --ink: #edeeee;
  --muted: #9a9ea3;
  --accent: #3f5c7d;
  --accent-hover: #4d719a;
  --accent-ink: #ffffff;
  --accent-text: #8fb0d6;
  --accent-strong: #a9c3dd;
  --accent-soft: #1c2b3d;
  --accent-border: #33445a;
  --success: #2f9757;
  --success-ink: #06210f;
  --success-soft: #16281c;
  --success-strong: #6bc48c;
  --warning: #c17b2e;
  --warning-ink: #1f1204;
  --warning-soft: #2c2013;
  --warning-strong: #dfa564;
  --danger: #c24b40;
  --danger-ink: #200705;
  --danger-soft: #2c1815;
  --danger-strong: #e08579;
  --chart-1: #7fa0c4;
  --chart-2: #c9a06a;
  --chart-3: #8fa3ab;
  --chart-4: #c17f7f;
  --chart-5: #7fb39f;
  --chart-6: #a89bcf;
}

/*
 * app.css — Binderly's own CSS: the paper ground, the hairline grid, and the
 * hero's one-time entrance (scan-sweep across the policy PDF). Tokens only.
 */

/* The page ground: warm paper with a faint hairline grid, swiss-ledger style. */
body {
  background-color: var(--canvas);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size: 100% 2.5rem, 2.5rem 100%;
  background-position: 0 0, 0 0;
}

/* ---- Hero-only entrance: the workspace panes settle in once, on load. ---- */
@keyframes ledger-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
#workspace-hero {
  opacity: 1;
}
#workspace-hero.reveal-in {
  animation: ledger-reveal 620ms var(--ease-out, ease) both;
}
html.reduced-motion #workspace-hero.reveal-in {
  animation: none;
}

/* The scanning highlight sweeping down the policy PDF, once, on entrance. */
.scan-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: -10%;
  height: 30%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent
  );
  opacity: 0;
}
#workspace-hero.reveal-in .scan-sweep {
  animation: scan-sweep-move 1500ms 200ms ease-in-out both;
}
@keyframes scan-sweep-move {
  0%   { top: -30%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
html.reduced-motion #workspace-hero.reveal-in .scan-sweep {
  animation: none;
  opacity: 0;
}

/* Annotated declarations crop — callout lines drawn from tokens, no images. */
.callout-line {
  position: absolute;
  background: var(--accent);
  opacity: 0.55;
}