/* Canonical Inkwise tokens for the local workspace.
   Edit here; scripts/sync_demo_theme.py copies this file into the standalone demo. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
}
:root {
  color-scheme: light;
  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --surface-app: #f8f9fa;
  --surface-card: #ffffff;
  --surface-muted: #f4f4f5;
  --surface-elevated: #f4f4f6;
  --surface-overlay: rgba(24, 24, 27, .4);
  --text-primary: #18181b;
  --text-secondary: #62626b;
  --brand: #111111;
  --brand-hover: #27272a;
  --brand-active: #000000;
  --brand-foreground: #ffffff;
  --border: #e4e4e7;
  --border-strong: #71717a;
  --focus: #18181b;
  --success: #047857;
  --success-subtle: #ecfdf5;
  --warning: #b45309;
  --warning-subtle: #fffbeb;
  --destructive: #b91c1c;
  --destructive-subtle: #fef2f2;
  --info: #1d4ed8;
  --info-subtle: #eff6ff;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --radius-sm: .375rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;
  --control-height: 2.75rem;
  --shadow-panel: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-float: 0 12px 36px rgba(0, 0, 0, .12);
  --motion-fast: 160ms;
  --motion-ease: cubic-bezier(.4, 0, .2, 1);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text-primary);
  background: var(--surface-app);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--surface-app); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { touch-action: manipulation; -webkit-tap-highlight-color: rgba(24, 24, 27, .08); }
button, input, select, textarea { max-width: 100%; }
a { color: var(--info); text-underline-offset: .2em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:target, :focus-visible { scroll-margin-block: 1.5rem; }
h1, h2, h3, h4 { color: var(--text-primary); line-height: 1.4; letter-spacing: -.015em; overflow-wrap: anywhere; text-wrap: balance; }
p, li, label, blockquote, small, pre { overflow-wrap: anywhere; }
::selection { background: var(--brand); color: var(--brand-foreground); }
.skip { position: absolute; inset-block-start: -6rem; inset-inline-start: 1rem; z-index: 100; padding: .75rem 1rem; background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.skip:focus { inset-block-start: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  button, input, select, textarea { border-color: ButtonText; }
}

:root{--surface-app:#f7f7f5;--text-primary:#242424;--text-secondary:#62655f;--brand:#31594d;--brand-hover:#27473d;--border:#dedfd9;--shadow-panel:none;--radius-lg:8px;--motion-fast:200ms}

/* Quiet desktop workspace palette. Status colors retain their semantic meaning. */
:root{--surface-app:#fff;--surface-card:#fff;--surface-muted:#f5f5f5;--surface-elevated:#f7f7f7;--text-primary:#292929;--text-secondary:#686868;--brand:#242424;--brand-hover:#3a3a3a;--brand-active:#151515;--border:#e7e7e7;--border-strong:#8a8a8a;--focus:#292929;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;--shadow-panel:none;--radius-lg:8px;--radius-md:7px}

/* Inkwise: ivory paper, mineral navigation and an oxblood accent. */
:root{--surface-app:#f3f0e9;--surface-card:#fffdf8;--surface-muted:#efede5;--surface-elevated:#e9e6dd;--text-primary:#302f2b;--text-secondary:#706c62;--brand:#6d3d4c;--brand-hover:#522b37;--brand-active:#40222b;--border:#ded9cc;--border-strong:#b5aa98;--focus:#895b69;--info:#6d3d4c;--shadow-panel:0 1px 2px #40352b06,0 8px 28px #40352b05;--radius-lg:10px}