/* Tote design tokens — generated from docs/tote-handoff/tokens/tokens.ts */
/* Do not hand-edit the theme blocks. Regenerate with: node scripts/gen-tokens.mjs */
/* (Rev 11/12: --deep per-hue, --tote-bag follows --deep; cream --ink on midnight. */
/*  Phase 3: DARK_THEMES pairings emitted as [data-theme][data-appearance="dark"].) */
[data-theme="sage"] {
  --bg: #F3F4F0;
  --surface: #FFFFFF;
  --ink: #16201A;
  --soft: #5C665D;
  --line: rgba(22,32,26,.12);
  --fill: rgba(22,32,26,.06);
  --accent: #1F6B45;
  --on-accent: #FFFFFF;
  --accent-soft: #DCEADB;
  --accent-ink: #1F6B45;
  --warm: #D23B1E;
  --deep: #173A2B;
  --deep-surface: #214A39;
  --glass: rgba(255,255,255,.72);
  --glass-spec: rgba(255,255,255,.55);
  --shadow: rgba(22,32,26,.10);
  --scrim-rgb: 22 32 26;
  --scrim-max: 0.18;
  --scrim-max-pop: 0.1;
  --tote-bag: var(--deep);
}

[data-theme="sage"][data-appearance="dark"] {
  --bg: #0C1D16;
  --surface: #214A39;
  --ink: #F4F1EA;
  --soft: #9CA099;
  --line: rgba(244,241,234,.12);
  --fill: rgba(244,241,234,.06);
  --accent: #317754;
  --on-accent: #FFFFFF;
  --accent-soft: #25543F;
  --accent-ink: #A4C3B4;
  --warm: #DA5E47;
  --deep: #173A2B;
  --deep-surface: #375C4D;
  --glass: rgba(33,74,57,.78);
  --glass-spec: rgba(255,255,255,.16);
  --shadow: rgba(0,0,0,.45);
  --scrim-rgb: 0 0 0;
  --scrim-max: 0.45;
  --scrim-max-pop: 0.25;
  --tote-bag: var(--deep);
}

[data-theme="ocean"] {
  --bg: #F2F4F7;
  --surface: #FFFFFF;
  --ink: #0F1A2A;
  --soft: #586577;
  --line: rgba(15,26,42,.12);
  --fill: rgba(15,26,42,.06);
  --accent: #1D5FBF;
  --on-accent: #FFFFFF;
  --accent-soft: #DAE5F6;
  --accent-ink: #1D5FBF;
  --warm: #D2471E;
  --deep: #12294A;
  --deep-surface: #1B365C;
  --glass: rgba(255,255,255,.72);
  --glass-spec: rgba(255,255,255,.55);
  --shadow: rgba(15,26,42,.10);
  --scrim-rgb: 15 26 42;
  --scrim-max: 0.18;
  --scrim-max-pop: 0.1;
  --tote-bag: var(--deep);
}

[data-theme="ocean"][data-appearance="dark"] {
  --bg: #091525;
  --surface: #1B365C;
  --ink: #F4F1EA;
  --soft: #9B9D9F;
  --line: rgba(244,241,234,.12);
  --fill: rgba(244,241,234,.06);
  --accent: #2F6CC4;
  --on-accent: #FFFFFF;
  --accent-soft: #1F4273;
  --accent-ink: #93B3E0;
  --warm: #DA6847;
  --deep: #12294A;
  --deep-surface: #324A6C;
  --glass: rgba(27,54,92,.78);
  --glass-spec: rgba(255,255,255,.16);
  --shadow: rgba(0,0,0,.45);
  --scrim-rgb: 0 0 0;
  --scrim-max: 0.45;
  --scrim-max-pop: 0.25;
  --tote-bag: var(--deep);
}

[data-theme="clay"] {
  --bg: #F6F2EE;
  --surface: #FFFFFF;
  --ink: #25170F;
  --soft: #7A6458;
  --line: rgba(37,23,15,.12);
  --fill: rgba(37,23,15,.06);
  --accent: #B3421E;
  --on-accent: #FFFFFF;
  --accent-soft: #F5DED1;
  --accent-ink: #B3421E;
  --warm: #1F7A66;
  --deep: #3A1E14;
  --deep-surface: #4B2A1D;
  --glass: rgba(255,255,255,.72);
  --glass-spec: rgba(255,255,255,.55);
  --shadow: rgba(37,23,15,.10);
  --scrim-rgb: 37 23 15;
  --scrim-max: 0.18;
  --scrim-max-pop: 0.1;
  --tote-bag: var(--deep);
}

[data-theme="clay"][data-appearance="dark"] {
  --bg: #1D0F0A;
  --surface: #4B2A1D;
  --ink: #F4F1EA;
  --soft: #A29B95;
  --line: rgba(244,241,234,.12);
  --fill: rgba(244,241,234,.06);
  --accent: #B3421E;
  --on-accent: #FFFFFF;
  --accent-soft: #622F1D;
  --accent-ink: #D79D8A;
  --warm: #479282;
  --deep: #3A1E14;
  --deep-surface: #5D3F34;
  --glass: rgba(75,42,29,.78);
  --glass-spec: rgba(255,255,255,.16);
  --shadow: rgba(0,0,0,.45);
  --scrim-rgb: 0 0 0;
  --scrim-max: 0.45;
  --scrim-max-pop: 0.25;
  --tote-bag: var(--deep);
}

[data-theme="plum"] {
  --bg: #F5F2F5;
  --surface: #FFFFFF;
  --ink: #22142A;
  --soft: #6E5F74;
  --line: rgba(34,20,42,.12);
  --fill: rgba(34,20,42,.06);
  --accent: #7B2E9C;
  --on-accent: #FFFFFF;
  --accent-soft: #ECDCF2;
  --accent-ink: #7B2E9C;
  --warm: #C94A12;
  --deep: #2E1838;
  --deep-surface: #3E2449;
  --glass: rgba(255,255,255,.72);
  --glass-spec: rgba(255,255,255,.55);
  --shadow: rgba(34,20,42,.10);
  --scrim-rgb: 34 20 42;
  --scrim-max: 0.18;
  --scrim-max-pop: 0.1;
  --tote-bag: var(--deep);
}

[data-theme="plum"][data-appearance="dark"] {
  --bg: #170C1C;
  --surface: #3E2449;
  --ink: #F4F1EA;
  --soft: #A09A9C;
  --line: rgba(244,241,234,.12);
  --fill: rgba(244,241,234,.06);
  --accent: #904FAC;
  --on-accent: #FFFFFF;
  --accent-soft: #502D5F;
  --accent-ink: #C5A3D4;
  --warm: #D36B3D;
  --deep: #2E1838;
  --deep-surface: #513A5B;
  --glass: rgba(62,36,73,.78);
  --glass-spec: rgba(255,255,255,.16);
  --shadow: rgba(0,0,0,.45);
  --scrim-rgb: 0 0 0;
  --scrim-max: 0.45;
  --scrim-max-pop: 0.25;
  --tote-bag: var(--deep);
}

[data-theme="midnight"] {
  --bg: #101117;
  --surface: #191B23;
  --ink: #F2EFE7;
  --soft: #9A9EAD;
  --line: rgba(242,239,231,.11);
  --fill: rgba(242,239,231,.06);
  --accent: #FFC24B;
  --on-accent: #1A1200;
  --accent-soft: #3A2F14;
  --accent-ink: #FFD27A;
  --warm: #FF6B4A;
  --deep: #08090D;
  --deep-surface: #15171E;
  --glass: rgba(25,27,35,.78);
  --glass-spec: rgba(255,255,255,.16);
  --shadow: rgba(0,0,0,.45);
  --scrim-rgb: 0 0 0;
  --scrim-max: 0.45;
  --scrim-max-pop: 0.25;
  --tote-bag: var(--ink);
}

[data-theme="midnight"][data-appearance="dark"] {
  --bg: #101117;
  --surface: #191B23;
  --ink: #F2EFE7;
  --soft: #9A9EAD;
  --line: rgba(242,239,231,.11);
  --fill: rgba(242,239,231,.06);
  --accent: #FFC24B;
  --on-accent: #1A1200;
  --accent-soft: #3A2F14;
  --accent-ink: #FFD27A;
  --warm: #FF6B4A;
  --deep: #08090D;
  --deep-surface: #15171E;
  --glass: rgba(25,27,35,.78);
  --glass-spec: rgba(255,255,255,.16);
  --shadow: rgba(0,0,0,.45);
  --scrim-rgb: 0 0 0;
  --scrim-max: 0.45;
  --scrim-max-pop: 0.25;
  --tote-bag: var(--ink);
}

/* Department colors — light grounds */
:root { --dept-light-produce-c: #1FA34A; }
:root { --dept-light-produce-on: #FFFFFF; }
:root { --dept-light-produce-tint: #E0F3E4; }
:root { --dept-light-produce-ink: #0E6B2C; }
:root { --dept-light-dairy-c: #2F6FF0; }
:root { --dept-light-dairy-on: #FFFFFF; }
:root { --dept-light-dairy-tint: #E0E9FD; }
:root { --dept-light-dairy-ink: #1A4FC0; }
:root { --dept-light-bakery-c: #F4A51C; }
:root { --dept-light-bakery-on: #3A2400; }
:root { --dept-light-bakery-tint: #FCEFD3; }
:root { --dept-light-bakery-ink: #875000; }
:root { --dept-light-pantry-c: #EE5A36; }
:root { --dept-light-pantry-on: #FFFFFF; }
:root { --dept-light-pantry-tint: #FBE2D9; }
:root { --dept-light-pantry-ink: #A9361A; }
:root { --dept-light-home-c: #8A57F0; }
:root { --dept-light-home-on: #FFFFFF; }
:root { --dept-light-home-tint: #ECE3FD; }
:root { --dept-light-home-ink: #5E30D0; }

/* Department colors — dark grounds */
:root { --dept-dark-produce-c: #3DD06C; }
:root { --dept-dark-produce-on: #062A12; }
:root { --dept-dark-produce-tint: rgba(61,208,108,.16); }
:root { --dept-dark-produce-ink: #7BE29B; }
:root { --dept-dark-dairy-c: #5B95FF; }
:root { --dept-dark-dairy-on: #04173A; }
:root { --dept-dark-dairy-tint: rgba(91,149,255,.16); }
:root { --dept-dark-dairy-ink: #9DBFFF; }
:root { --dept-dark-bakery-c: #FFC043; }
:root { --dept-dark-bakery-on: #3D2600; }
:root { --dept-dark-bakery-tint: rgba(255,192,67,.16); }
:root { --dept-dark-bakery-ink: #FFD47F; }
:root { --dept-dark-pantry-c: #FF7B5A; }
:root { --dept-dark-pantry-on: #3A0E02; }
:root { --dept-dark-pantry-tint: rgba(255,123,90,.16); }
:root { --dept-dark-pantry-ink: #FFA48C; }
:root { --dept-dark-home-c: #A983FF; }
:root { --dept-dark-home-on: #1C0A4A; }
:root { --dept-dark-home-tint: rgba(169,131,255,.18); }
:root { --dept-dark-home-ink: #C8B0FF; }

/* People colors — fixed per member */
:root { --mori: #D6336C; --mori-on: #FFFFFF; --you: #0B7F80; --you-on: #FFFFFF; }

/* Type */
:root {
  --font-latin: "IBM Plex Sans", "IBM Plex Sans Hebrew", system-ui, sans-serif;
  --font-hebrew: "IBM Plex Sans Hebrew", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
[dir="rtl"] { --font: var(--font-hebrew); }
[dir="ltr"] { --font: var(--font-latin); }

:root {
  --r-chip: 10px; --r-control: 14px; --r-dock-btn: 20px;
  --r-card: 26px; --r-dock: 28px; --r-sheet: 30px; --r-pill: 999px;
  --touch: 44px;
  --ease-pop: cubic-bezier(.3,1.7,.5,1);
  --ease-out: cubic-bezier(.4,0,.2,1);
  --ease-swipe: cubic-bezier(.3,1.2,.5,1);
}

/* Rev 20 structure + motion (tokens: checkbox, cardTray, tote, addDock —
   docs/tote-handoff/tokens). Values only; the consumers land chunk by
   chunk (§5.1 circle check, §5.11 card tray, §5.12 living tote,
   §5.13 add dock). */
:root {
  --checkbox-size: 22px;
  --card-chip-h: 32px; --card-chip-r: 11px; --card-chip-gap: 6px;
  --card-chip-on: #F4F1EA; --card-chip-off: rgba(244,241,234,.12);
  --card-tray-in: 260ms;
  --tote-drop-ms: 600ms; --tote-drop-ease: cubic-bezier(.45,0,.9,.55);
  --tote-arc-ms: 720ms;
  --tote-squash-ms: 460ms; --tote-squash-ease: cubic-bezier(.3,1.4,.5,1);
  --tote-shrug-ms: 400ms; --tote-hop-ms: 600ms; --tote-nod-ms: 280ms;
  --tote-peek-spring: 420ms;
  --dock-grow-ms: 420ms; --dock-grow-ease: cubic-bezier(.22,1.1,.36,1);
  --dock-keyboard-ms: 320ms; --dock-keyboard-ease: cubic-bezier(.32,.72,0,1);
  --dock-cap-typing: 252px; --dock-cap-suggestions: 400px;
  --dock-cap-suggestions-kb: 196px; --dock-added-note-ms: 2400ms;
}

:root { --deep-ink: #F4F1EA; --deep-soft: rgba(244,241,234,.6);
  --deep-line: rgba(244,241,234,.08); --deep-fill: rgba(244,241,234,.1); }

/* Legacy aliases — maps old style.css variable names to design tokens.
   Allows the current UI to run on the new token system during the rebuild. */
:root {
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--surface);
  --card-foreground: var(--ink);
  --popover: var(--surface);
  --popover-foreground: var(--ink);
  --primary: var(--accent);
  --primary-foreground: var(--on-accent);
  --primary-hover: var(--accent);
  --secondary: var(--fill);
  --secondary-foreground: var(--ink);
  --muted: var(--fill);
  --muted-foreground: var(--soft);
  /* --accent is NOT aliased: the design token (deep) is the primary accent.
     The old alias to accent-soft made every accent button render pale. */
  --accent-foreground: var(--accent-ink);
  --destructive: var(--warm);
  --destructive-foreground: #FFFFFF;
  --border: var(--line);
  --input: var(--fill);
  --ring: var(--accent);
  --radius: var(--r-card);
  --radius-md: var(--r-control);
  --radius-sm: var(--r-chip);
  --shadow-sm: 0 1px 2px var(--shadow);
  --shadow-md: 0 1px 3px var(--shadow), 0 4px 8px var(--shadow);
}