/* =====================================================================
   Taskbook design tokens — v4 handoff.
   Warm paper and night paper. Lime (--tb-accent) is a FILL only: logo,
   Send, the AI badge, highlighted phrases, Add task in light. Accent as
   text, icon or border is --tb-accent-text (dark olive / soft lime).
   The second block maps these onto the names the app's CSS already uses,
   so component rules stay readable and there is one place to retune.
   ===================================================================== */
:root{
  /* Surfaces */
  --tb-bg:#F4F3EF;
  --tb-surface:#FFFFFF;
  --tb-panel:#EBEAE3;
  --tb-nav-selected:#E3E2DA;
  --tb-bubble:#E3E2DA;

  /* Text */
  --tb-text:#17171B;
  --tb-text-body:#3A3A40;
  --tb-text-muted:#64646C;
  --tb-text-faint:#6B6B73;

  /* Lines */
  --tb-line:#E3E2DC;
  --tb-border:#D6D5CC;
  --tb-shadow:rgba(23,23,27,.14);

  /* Accent */
  --tb-accent:#CDEB5A;
  --tb-on-accent:#17171B;
  --tb-accent-text:#3F5A0A;
  --tb-accent-tint:rgba(63,90,10,.10);
  --tb-accent-line:rgba(63,90,10,.38);
  --tb-logo-tile:#17171B;          /* the mark: ink tile, lime bars on paper… */
  --tb-logo-ink:#CDEB5A;
  --tb-count:#3F5A0A;
  --tb-primary-bg:#CDEB5A;
  --tb-primary-fg:#17171B;
  --tb-primary-key:rgba(23,23,27,.12);
  --tb-hover:rgba(23,23,27,.045);
  --tb-press:rgba(23,23,27,.08);

  /* The six named colours of the palette */
  --tb-red:#D8432A;
  --tb-purple:#7A5BD6;
  --tb-blue:#3A67C9;
  --tb-amber:#A8620A;
  --tb-green:#2F8A55;
  --tb-pink:#C8457A;

  /* Project and label colours: the six above plus eight neighbours in the
     same register, so a colour someone already picked still exists. */
  --c-tomato:#D8432A;   --c-orange:#C2660C;  --c-amber:#A8620A;  --c-lime:#6E8A12;
  --c-green:#2F8A55;    --c-teal:#13827C;    --c-sky:#2D7BB5;    --c-blue:#3A67C9;
  --c-indigo:#5553C7;   --c-violet:#7A5BD6;  --c-pink:#C8457A;   --c-rose:#C04A5A;
  --c-mocha:#8A6A4F;    --c-charcoal:#6B6B73;

  /* Shape, type, motion */
  --tb-radius-sm:6px;
  --tb-radius:10px;
  --tb-radius-lg:14px;
  --tb-font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --tb-font-ui:'Schibsted Grotesk',system-ui,sans-serif;
  --tb-font-mono:'JetBrains Mono',ui-monospace,monospace;
  color-scheme:light;
}

/* Night paper: warm charcoal, never blue-black. Lime is kept for AI moments,
   so Add task goes off-white and counts go neutral. .tb-night lays the same
   palette over one element of a light page (the landing's privacy band);
   inside it use the --tb-* names, since the bridge below resolves at :root. */
:root[data-theme="dark"],
.tb-night{
  --tb-bg:#191816;
  --tb-surface:#211F1C;
  --tb-panel:#1E1C19;
  --tb-nav-selected:#2A2723;
  --tb-bubble:#2C2925;

  --tb-text:#ECE7DD;
  --tb-text-body:#CFC9BD;
  --tb-text-muted:#A29C90;
  --tb-text-faint:#8A8478;

  --tb-line:#2F2C27;
  --tb-border:#3A3630;
  --tb-shadow:rgba(0,0,0,.45);

  --tb-accent-text:#CFDF8C;
  --tb-accent-tint:rgba(207,223,140,.12);
  --tb-accent-line:rgba(207,223,140,.34);
  --tb-logo-tile:#CDEB5A;          /* …reversed at night: lime tile, ink bars */
  --tb-logo-ink:#17171B;
  --tb-count:#A29C90;
  --tb-primary-bg:#ECE7DD;
  --tb-primary-fg:#191816;
  --tb-primary-key:rgba(25,24,22,.12);
  --tb-hover:rgba(236,231,221,.05);
  --tb-press:rgba(236,231,221,.09);

  --tb-red:#E0826B;
  --tb-purple:#B3A3D9;
  --tb-blue:#8FA8D6;
  --tb-amber:#D9A95B;
  --tb-green:#8DBF8B;
  --tb-pink:#D99AB0;

  --c-tomato:#E0826B;   --c-orange:#D59363;  --c-amber:#D9A95B;  --c-lime:#B9CC77;
  --c-green:#8DBF8B;    --c-teal:#7CBDB4;    --c-sky:#8FB8D6;    --c-blue:#8FA8D6;
  --c-indigo:#A1A2DC;   --c-violet:#B3A3D9;  --c-pink:#D99AB0;   --c-rose:#D4959B;
  --c-mocha:#BFA288;    --c-charcoal:#A29C90;
  color-scheme:dark;
}

/* =====================================================================
   Bridge: the semantic names the component CSS is written against.
   ===================================================================== */
:root{
  --canvas:var(--tb-bg);
  --sidebar:var(--tb-bg);          /* the nav shares the paper ground; a border separates it */
  --surface:var(--tb-surface);
  --assist-bg:var(--tb-panel);
  --block:var(--tb-nav-selected);
  --block-hover:var(--tb-border);
  --bubble:var(--tb-bubble);

  --ink-1:var(--tb-text);
  --ink-2:var(--tb-text-body);
  --ink-3:var(--tb-text-muted);
  --ink-4:var(--tb-text-faint);

  --line:var(--tb-line);
  --line-strong:var(--tb-border);
  --hover:var(--tb-hover);
  --press:var(--tb-press);
  --select:var(--tb-nav-selected);

  /* accent as text/icon/border vs accent as a fill — the two are not interchangeable */
  --accent:var(--tb-accent-text);
  --accent-hover:var(--tb-accent-text);
  --accent-fill:var(--tb-accent);
  --on-accent:var(--tb-on-accent);
  --accent-tint:var(--tb-accent-tint);
  --accent-line:var(--tb-accent-line);
  --accent-inverse:var(--tb-accent);

  --critical:var(--tb-red);
  --critical-tint:color-mix(in srgb,var(--tb-red) 10%,transparent);
  --scrim:color-mix(in srgb,var(--tb-text) 24%,transparent);
  --elev:0 1px 2px color-mix(in srgb,var(--tb-shadow) 40%,transparent),0 16px 40px var(--tb-shadow);

  /* priority reads as colour again now the palette allows it */
  --p1:var(--tb-red); --p2:var(--tb-amber); --p3:var(--tb-blue); --p4:var(--tb-text-faint);
  --ok:var(--tb-green); --warn:var(--tb-amber); --danger:var(--tb-red); --info:var(--tb-blue);
  --text:var(--ink-1); --text-2:var(--ink-2); --text-3:var(--ink-3);
  --bg:var(--canvas); --bg-2:var(--sidebar); --panel:var(--surface); --panel-2:var(--block);
  --line-soft:var(--line); --active:var(--press); --sel:var(--select); --accent-soft:var(--accent-tint);

  --r-sm:var(--tb-radius-sm); --r:var(--tb-radius); --r-lg:var(--tb-radius-lg);
  --font:var(--tb-font-ui); --font-display:var(--tb-font-display); --mono:var(--tb-font-mono);
}

/* The OS setting decides only when the user has not chosen in Settings. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --tb-bg:#191816; --tb-surface:#211F1C; --tb-panel:#1E1C19; --tb-nav-selected:#2A2723; --tb-bubble:#2C2925;
    --tb-text:#ECE7DD; --tb-text-body:#CFC9BD; --tb-text-muted:#A29C90; --tb-text-faint:#8A8478;
    --tb-line:#2F2C27; --tb-border:#3A3630; --tb-shadow:rgba(0,0,0,.45);
    --tb-accent-text:#CFDF8C; --tb-accent-tint:rgba(207,223,140,.12); --tb-accent-line:rgba(207,223,140,.34);
    --tb-logo-tile:#CDEB5A; --tb-logo-ink:#17171B;
    --tb-count:#A29C90; --tb-primary-bg:#ECE7DD; --tb-primary-fg:#191816; --tb-primary-key:rgba(25,24,22,.12);
    --tb-hover:rgba(236,231,221,.05); --tb-press:rgba(236,231,221,.09);
    --tb-red:#E0826B; --tb-purple:#B3A3D9; --tb-blue:#8FA8D6; --tb-amber:#D9A95B; --tb-green:#8DBF8B; --tb-pink:#D99AB0;
    --c-tomato:#E0826B; --c-orange:#D59363; --c-amber:#D9A95B; --c-lime:#B9CC77;
    --c-green:#8DBF8B; --c-teal:#7CBDB4; --c-sky:#8FB8D6; --c-blue:#8FA8D6;
    --c-indigo:#A1A2DC; --c-violet:#B3A3D9; --c-pink:#D99AB0; --c-rose:#D4959B;
    --c-mocha:#BFA288; --c-charcoal:#A29C90;
    color-scheme:dark;
  }
}