/* bstack design tokens, taken from bpad (www.bpad.cc).
   Source repo: barrapad/barrapad. Every value below is copied from the file and
   line named in its group comment. Nothing here is invented; where bpad has two
   values for one thing, see "Inconsistencies found" in README.md.

   How themes work (lib/appearance.ts:29-37): the app sets
   <html data-theme="barrapad|calm|synthwave|earth|midnight" data-font="mono|sans|serif">
   and adds class="dark" only for themes that have modes (barrapad and default,
   lib/appearance.ts:11). Each theme swaps the six base colors and nothing else;
   every other color is mixed from them. */

/* Font: DM Mono 300/400/500 + italics (app/globals.css:1). Load it with:
   <link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet"> */

:root {
  /* ── Base colors, bpad light (app/globals.css:40-48) ── */
  --sidebar-bg: #F5F2ED;   /* chrome, sidebar, code block ground, logo paper */
  --accent: #D4550A;       /* "what is alive": caret, selection, checkbox, live state */
  --border: #E5E0D8;
  --muted: #736d66;        /* placeholders, dates, labels; 4.5:1 (design-research.md:146) */
  --ink: #1A1A1A;          /* text and the primary button */
  --editor-bg: #ffffff;    /* the page/paper */

  /* ── Derived colors, mixed from the base so every theme gets them (app/globals.css:49-57) ── */
  --ink-soft: color-mix(in srgb, var(--ink) 68%, var(--editor-bg));
  --hover: color-mix(in srgb, var(--ink) 6%, transparent);
  --code-bg: color-mix(in srgb, var(--ink) 8%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-tint: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-ink: color-mix(in srgb, var(--accent) 82%, var(--ink));
  --decor: color-mix(in srgb, var(--ink) 30%, var(--editor-bg));
  /* Not named tokens in bpad, used inline; named here so tools reuse them: */
  --frame: color-mix(in srgb, var(--ink) 8%, transparent);              /* card outline, app/globals.css:789 */
  --logo-grid: color-mix(in srgb, var(--ink) 28%, var(--sidebar-bg));   /* components/Logo.tsx:36 */
  --logo-block-grid: color-mix(in srgb, var(--accent) 55%, #000);       /* components/Logo.tsx:37 */
  --tooltip-bg: #1a1a1a;   /* fixed in every theme, app/globals.css:703 */
  --tooltip-fg: #fff;      /* app/globals.css:704 */
  --danger: #E5484D;       /* storage-full dot, components/AppShell.tsx:865 */
  --mark-ink: #1f1f1f;     /* text on pastel highlights, app/globals.css:1132 */
  --scrim: rgba(0,0,0,0.4);        /* modal backdrop, app/globals.css:749 */
  --scrim-light: rgba(0,0,0,0.15); /* sheet backdrop, app/globals.css:761 */
  --scrim-palette: rgba(0,0,0,0.3);/* command palette, components/CommandPalette.tsx:112 */
  --scrim-drawer: rgba(0,0,0,0.45);/* phone sidebar, components/AppShell.tsx:433 */

  /* ── Font stacks (app/globals.css:37,47,831-833) ── */
  --font-ui: 'DM Mono', monospace;               /* the whole interface, every theme */
  --font-mono: 'DM Mono', 'Courier New', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --editor-font: 'DM Mono', monospace;

  /* ── Type scale ──
     Content (app/globals.css:211,225-228): body size is user zoom 12/14/16/18/20/24
     (components/AppearanceModal.tsx:19), default 16 (lib/appearance.ts:7). */
  --editor-size: 16px;
  --lh-body: 1.65;
  --fs-h1: 2em;    --lh-h1: 1.25;  --fw-h1: 700;
  --fs-h2: 1.5em;  --lh-h2: 1.3;   --fw-h2: 600;
  --fs-h3: 1.25em; --lh-h3: 1.4;   --fw-h3: 600;
  --fs-h4: 1.1em;  --lh-h4: 1.4;   --fw-h4: 600;
  --fs-code: 0.9em;                 /* app/globals.css:297,1153 */
  /* Interface sizes (Tailwind classes counted across components/*.tsx; observed) */
  --fs-ui-2xs: 10px;  /* key badges, pill tags, uppercase labels (app/globals.css:369,1199) */
  --fs-ui-xs: 11px;   /* sync status, tooltips, tags (components/AppShell.tsx:547, app/globals.css:705,848) */
  --fs-ui-sm: 12px;   /* text-xs: tips, menus, labels (app/globals.css:1222) */
  --fs-ui-md: 13px;   /* menu item labels (components/SlashMenu.tsx:114) */
  --fs-ui-base: 14px; /* text-sm: buttons, palette, legal body (app/globals.css:1183) */
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;  /* DM Mono weights shipped; 600/700 are synthesized */
  --tracking-label: 0.05em;  /* Tailwind tracking-wider on uppercase labels, components/AppearanceModal.tsx:66 */

  /* ── Spacing: editor rhythm in em, so it follows zoom (app/globals.css:205-235, docs/design-audit.md:67-85) ── */
  --space-list-item: 0.3em;     /* li + li */
  --space-block: 0.6em;         /* block after block */
  --space-container: 0.8em;     /* around quote, code, table, image, node views */
  --space-divider: 1.2em;       /* around hr */
  --space-h1-above: 1.2em; --space-h1-below: 0.4em;
  --space-h2-above: 1em;   --space-h2-below: 0.35em;
  --space-h3-above: 0.9em; --space-h3-below: 0.3em;
  --measure: 68ch;              /* text column, app/globals.css:1116 */
  --pad-desktop: 3rem;          /* app/globals.css:1113 */
  --pad-tablet: 2rem;           /* <=1024px, app/globals.css:1121 */
  --pad-phone: 16px;            /* <=640px, app/globals.css:1124 */
  /* Interface spacing is Tailwind's 4px step (p-1.5 = 6px, px-3 = 12px, py-2 = 8px...). */
  --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --sidebar-width: 230px;       /* app/globals.css:1162 */
  --sheet-width: 340px;         /* app/globals.css:770 */

  /* ── Radii (app/globals.css + Tailwind rounded-* in components; Tailwind v4 defaults) ── */
  --radius-xs: 3px;    /* highlight mark, scrollbar thumb (1133, 694) */
  --radius-sm: 4px;    /* inline code, mention chip, selected node (294, 980, 1142) */
  --radius-kbd: 5px;   /* key badge, drag handle (1197, 1309) */
  --radius-input: 6px; /* inputs, tip action, image (381, 1227, 682) */
  --radius-btn: 8px;   /* rounded-lg: buttons, tips, note rows, code block (732, 1219, 304) */
  --radius-menu: 10px; /* slash/mention menu, selection bar (1017, components/SelectionBar.tsx:77) */
  --radius-card: 12px; /* rounded-xl: editor card, popovers, palette, dropdowns (788, 356, 895) */
  --radius-modal: 16px;/* rounded-2xl: modals, appearance sheet corner (768, components/ShareModal.tsx:259) */
  --radius-pill: 20px; /* tags (851, 879); avatars use 50% */

  /* ── Shadows (each from the line named) ── */
  --shadow-tooltip: 0 4px 12px rgba(0,0,0,0.18);                                /* 715 */
  --shadow-bar: 0 2px 10px rgba(0,0,0,0.12);                                    /* SelectionBar.tsx:80 */
  --shadow-menu: 0 6px 20px rgba(0,0,0,0.1);                                    /* 1018 */
  --shadow-popover: 0 8px 28px rgba(0,0,0,0.14);                                /* 357 (tag popover uses .12, 896) */
  --shadow-tip: 0 6px 24px color-mix(in srgb, var(--ink) 10%, transparent);     /* 1220 */
  --shadow-sheet: 0 -8px 32px rgba(0,0,0,0.12);                                 /* 769 */
  --shadow-lift: 0 4px 16px rgba(0,0,0,0.10);                                   /* drag press, 144 */
  --shadow-dropdown: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Tailwind shadow-xl, AppShell.tsx:703 */
  --shadow-palette: 0 25px 50px -12px rgb(0 0 0 / 0.25);                        /* Tailwind shadow-2xl, CommandPalette.tsx:117 */
  --ring-accent: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); /* selected poll, 430 */

  /* ── Motion: durations (CSS in app/globals.css, framer-motion in components) ── */
  --dur-instant: 100ms;  /* list hover bg (954), tooltip fade (713) */
  --dur-press: 120ms;    /* button bg/color (toolbar/parts.tsx:162), dropdown in (AppShell.tsx:702), key badge (1200) */
  --dur-menu: 130ms;     /* context menu in (ContextMenu.tsx:73) */
  --dur-fast: 150ms;     /* hover tints (11, 345, 734), toolbar fade (NoteEditorCore.tsx:921), selection bar (SelectionBar.tsx:67), sync busy (AppShell.tsx:542) */
  --dur-tip: 180ms;      /* hints and nudges arrive (ButtonHints.tsx:115, 1208) */
  --dur-base: 200ms;     /* backdrop (AppShell.tsx:437), "Saved" (559), guest pill (860), lock veil (NoteEditorCore.tsx:979) */
  --dur-sheet: 220ms;    /* appearance sheet slide up (774) */
  --dur-gentle: 300ms;   /* focus tip in, after a 350ms wait (AppShell.tsx:791) */
  --dur-bar: 500ms;      /* poll result bar (622) */
  --dur-calm: 900ms;     /* focus mode chrome folds (1164) */
  --dur-breathe: 1400ms; /* focus mode text settles (1257) */
  --delay-tooltip: 500ms;/* tooltip waits on hover (726) */
  --spin: 1.1s;          /* sync spinner turn (AppShell.tsx:549) */
  --blink: 1s;           /* caret blink, steps(1) (app/not-found.tsx:23) */

  /* ── Motion: easings ── */
  --ease: ease;                                        /* CSS default, most transitions */
  --ease-out: cubic-bezier(0, 0, 0.58, 1);             /* framer-motion 'easeOut' (ButtonHints.tsx:115) */
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1); /* toolbar press, sheet, poll bar, drop (parts.tsx:162, 774, 622, 164) */
  --ease-fold: cubic-bezier(0.65, 0, 0.35, 1);         /* focus mode chrome (1164) */
  --ease-breathe: cubic-bezier(0.4, 0, 0.2, 1);        /* focus mode text (1257) */
  /* Springs (framer-motion), for reference: drawer 380/36 mass .8 (AppShell.tsx:474);
     side panel 500/32 (CommentSidebar.tsx:766); popover 500/30 mass .5 (MentionProfilePopover.tsx:108). */

  /* ── Z layers (observed across app/globals.css and components) ── */
  --z-veil: 30;        /* lock veil over the page (797) */
  --z-bar: 40;         /* selection bar (SelectionBar.tsx:75) */
  --z-modal: 50;       /* modal + sheet backdrops, guest pill (743, 757) */
  --z-dropdown: 55;    /* top bar dropdowns (AppShell.tsx:703) */
  --z-tip: 56;         /* focus tip (AppShell.tsx:793) */
  --z-drawer: 60;      /* phone sidebar backdrop 60, drawer 61 (AppShell.tsx:432,468) */
  --z-hint: 70;        /* button hints (ButtonHints.tsx:109) */
  --z-palette: 80;     /* command palette (CommandPalette.tsx:112) */
  --z-kbd: 90;         /* key badges, nudges (1196, 1207) */
  --z-dropcursor: 100; /* (173) */
  --z-popover: 200;    /* footnote and tag popovers (359, 892) */
  --z-tooltip: 999;    /* (714) */
}

/* ── Dark mode, bpad and Default only (app/globals.css:60-72) ──
   "Softer than pure white on black (halation), one desaturated orange accent." */
.dark {
  --sidebar-bg: #1d1d29;
  --accent: #e2834f;
  --border: #2e2e40;
  --muted: #8f8fa6;
  --ink: #d4d4dc;
  --editor-bg: #16161f;
}
.dark body { -webkit-font-smoothing: antialiased; }
.dark, [data-theme="synthwave"], [data-theme="midnight"] { color-scheme: dark; }

/* ── Named themes; they ignore light/dark (app/globals.css:74-111) ── */
[data-theme="calm"] {
  --sidebar-bg: #EDE8E0;
  --accent: #9B7D5E;
  --border: #D8D0C4;
  --muted: #756a5c;
  --editor-bg: #F5F0E8;
}
[data-theme="synthwave"] {
  --sidebar-bg: #12122a;
  --accent: #a855f7;
  --border: #2d2d4e;
  --muted: #9494b4;
  --ink: #e2e2f0;
  --editor-bg: #1a1a2e;
}
[data-theme="earth"] {
  --sidebar-bg: #8b9e7e;
  --accent: #7a6450;
  --border: #7a8f6e;
  --muted: #4a5242;
  --ink: #2d2820;
  --editor-bg: #c8d4c0;
}
[data-theme="midnight"] {
  --sidebar-bg: #0d1b2e;
  --accent: #a0aec0;
  --border: #1e3050;
  --muted: #8295b0;
  --ink: #cbd5e0;
  --editor-bg: #0a1628;
}

/* ── Base rules every tool keeps (app/globals.css:118-126, 691-695, 1140-1141, 1279-1285) ── */
* { box-sizing: border-box; }
body { font-family: var(--font-ui); color: var(--ink); background: var(--editor-bg); }
::selection { background: var(--accent-tint); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Tool accents (decided 2026-10-22) ──
   Each tool sets one data attribute on <html> and gets its own accent; every other
   accent color (soft, tint, link ink, logo block grid) is mixed from --accent, so
   nothing else changes. Dark values keep the hue, drop saturation to ~79% and land
   at bpad's dark contrast (~6.5:1 on --editor-bg), the same treatment bpad's
   #D4550A -> #e2834f gets. The accent is never body text: links use --accent-ink
   (accent mixed 82% into ink), which passes 4.5:1 for every tool in light and dark.
   Named themes (Calm, Synthwave, Earth, Midnight) are bpad only; other tools ship
   light and dark. Usage: <html data-tool="bdrop">. bpad needs no attribute. */
:root[data-tool="bdrop"] { --accent: #0E7C74; }
:root[data-tool="bqrc"]   { --accent: #2F55C8; }
:root[data-tool="bpdf"]  { --accent: #C2362F; }
:root[data-tool="bpixel"]  { --accent: #3F8A3A; }
:root[data-tool="bmeet"] { --accent: #7A4CC9; }
:root.dark[data-tool="bdrop"], [data-tool="bdrop"] .dark { --accent: #27aca2; }
:root.dark[data-tool="bqrc"],   [data-tool="bqrc"] .dark   { --accent: #8599d5; }
:root.dark[data-tool="bpdf"],  [data-tool="bpdf"] .dark  { --accent: #d38682; }
:root.dark[data-tool="bpixel"],  [data-tool="bpixel"] .dark  { --accent: #61ab5c; }
:root.dark[data-tool="bmeet"], [data-tool="bmeet"] .dark { --accent: #a88fd2; }