:root {
  --ref-ink: #2e010d;
  --ref-plum: #660227;
  --ref-raspberry: #961b49;
  --ref-cornflower: #5c6ef6;
  --ref-paper-dawn: #ffe9f5;
  --ref-paper-ice: #d1dbff;
  --ref-paper-peony: #ffb8df;
  --ref-paper-apricot: #ffac5e;
  --ref-paper-lilac: #a9b3ff;
  --ref-paper-asparagus: #93a96b;
  --color-page: #f3f1ec;
  --color-surface: #ffffff;
  --color-surface-subtle: #f8f8f8;
  --color-surface-muted: #f1f1f1;
  --color-board: #fdfdf9;
  --color-text: var(--ref-ink);
  --color-text-muted: #686970;
  --color-accent: var(--ref-plum);
  --color-accent-hover: var(--ref-ink);
  --color-on-accent: #ffffff;
  --color-accent-subtle: var(--ref-paper-dawn);
  --color-danger: var(--ref-raspberry);
  --color-on-danger: #ffffff;
  --color-danger-subtle: #ffe9f5;
  --color-border: #81828a;
  --color-hairline: #dddee2;
  --color-focus: var(--ref-cornflower);
  --color-success: #527432;
  --color-warning: #a85a0b;
  --color-toast: var(--ref-ink);
  --color-on-toast: #ffffff;
  --color-open: var(--ref-paper-ice);
  --color-on-open: var(--ref-ink);
  --color-overlay: rgba(20, 16, 24, .38);
  --surface-rgb:
    255,
    255,
    255;
  --ink-rgb:
    46,
    1,
    13;
  --color-rule: rgba(var(--ink-rgb), .14);
  --color-rule-strong: rgba(var(--ink-rgb), .22);
  --color-rule-subtle: rgba(var(--ink-rgb), .08);
  --color-state-hover: rgba(var(--surface-rgb), .55);
  --color-composer: rgba(var(--surface-rgb), .92);
  --color-tools: rgba(var(--surface-rgb), .7);
  --color-column: rgba(var(--surface-rgb), .22);
  --color-add-note: rgba(var(--surface-rgb), .65);
  --note-ink: var(--ref-ink);
  --note-focus: #2439a6;
  --note-on-ink: #ffffff;
  --note-border: rgba(46, 1, 13, .035);
  --note-control-border: rgba(46, 1, 13, .25);
  --note-edit-border: rgba(46, 1, 13, .35);
  --note-badge-border: rgba(46, 1, 13, .1);
  --note-badge-surface: rgba(255, 255, 255, .45);
  --note-control-hover: rgba(255, 255, 255, .55);
  --note-edit-surface: rgba(255, 255, 255, .7);
  --note-vote-surface: rgba(255, 255, 255, .3);
  --note-vote-border: rgba(46, 1, 13, .2);
  --note-highlight: rgba(255, 255, 255, .25);
  --note-adhesive-rule: rgba(46, 1, 13, .025);
  --note-paper-shading:
    linear-gradient(
      180deg,
      rgba(46,1,13,.055),
      rgba(46,1,13,.025) 22px,
      transparent 23px,
      rgba(255,255,255,.14) 85%,
      rgba(255,255,255,.28));
  --note-shadow:
    0 1px 1px rgba(46,1,13,.08),
    1px 4px 5px -3px rgba(46,1,13,.2),
    2px 12px 12px -10px rgba(46,1,13,.24);
  --note-curl-shadow: 0 4px 5px rgba(46,1,13,.1);
  --board-texture:
    radial-gradient(
      circle,
      rgba(var(--ink-rgb),.06) .65px,
      transparent .9px);
  --board-sheen:
    linear-gradient(
      115deg,
      rgba(var(--surface-rgb),.8),
      transparent 60%);
  --button-shading: linear-gradient(rgba(255,255,255,.07), transparent);
  --font-body: "Inter", system-ui, sans-serif;
  --font-extended: var(--font-body);
  --font-display: "Newsreader", Georgia, serif;
  --font-note: "Newsreader", Georgia, serif;
  --font-meta: var(--font-body);
  --weight-display: 450;
  --weight-heading: 600;
  --tracking-display: -.025em;
  --tracking-heading: 0em;
  --tracking-note: 0em;
  --type-caption: 12px;
  --type-small: 13px;
  --type-label: 14px;
  --type-control: 15px;
  --type-body: 16px;
  --type-section: 16px;
  --type-list: 20px;
  --type-note: 17px;
  --type-page: clamp(22px, 2.5vw, 28px);
  --type-hero: clamp(32px, 4.5vw, 48px);
  --type-share-code: 40px;
  --leading-body: 1.5;
  --leading-control: 1.4;
  --leading-heading: 1.2;
  --space-half: 4px;
  --space-1: 8px;
  --space-1-5: 12px;
  --space-2: 16px;
  --space-2-5: 20px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --r-lg: 16px;
  --r-md: 8px;
  --r-sm: 4px;
  --control-height: 40px;
  --control-height-compact: 36px;
  --control-height-small: 32px;
  --target-touch: 44px;
  --icon-size: 18px;
  --lane-width: 304px;
  --motion-fast: .16s;
  --focus-width: 2px;
  --focus-offset: 2px;
  --opacity-disabled: .45;
  --shadow-control: 0 1px 2px rgba(var(--ink-rgb),.05);
  --shadow-control-pressed: inset 0 1px 3px rgba(var(--ink-rgb),.16);
  --shadow-input: inset 0 1px 3px rgba(var(--ink-rgb),.055);
  --shadow-panel: 0 2px 3px rgba(var(--ink-rgb),.035), 0 8px 20px -18px rgba(var(--ink-rgb),.25);
  --shadow-hover: 0 3px 12px rgba(var(--ink-rgb),.06);
  --shadow-overlay: 0 10px 32px rgba(0,0,0,.2);
  --shadow-highlight: inset 0 1px rgba(var(--surface-rgb),.9);
  --shadow-primary: inset 0 1px rgba(255,255,255,.12), 0 2px 2px rgba(var(--ink-rgb),.12);
  --shadow-focus: 0 0 0 2px rgba(var(--ink-rgb),.07);
  --select-padding-start: 12px;
  --select-padding-end: 40px;
  --select-arrow-inset: 16px;
  --select-arrow-size: 5px;
  --select-arrow-color: var(--color-text);
  --button-radius: var(--r-md);
  --input-radius: var(--r-md);
  --panel-radius: var(--r-lg);
  --note-radius: 2px 3px 7px 2px;
  --bg: var(--color-page);
  --surface: var(--color-surface);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --border: var(--color-border);
  --hairline: var(--color-hairline);
  --primary: var(--color-accent);
  --on-primary: var(--color-on-accent);
  --focus: var(--color-focus);
  --danger: var(--color-danger);
  --shadow-card: var(--note-shadow);
  --dawn: var(--ref-paper-dawn);
  --ice: var(--ref-paper-ice);
  --peony: var(--ref-paper-peony);
  --apricot: var(--ref-paper-apricot);
  --lilac: var(--ref-paper-lilac);
  --asparagus: var(--ref-paper-asparagus);
  color-scheme: light;
}