/* Yarvy styles, split into focused files linked in order from index.html: tokens, base, rail, hero, tasks, dashboard, modals, views, you, responsive, dark. */
/* No build step: edit these files directly. Order matters: responsive.css loads after the component files so its mobile overrides win; dark.css loads last so its theme overrides win. */
/* App font (Source Sans 3), self-hosted as generic /fonts/sans-*.woff2 so swapping fonts is just a new file + renaming the family in --font-sans below. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/sans-latin.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: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  /* Brand palette: source of truth. Mirrored in the dark theme (public/css/dark.css), public/login.html (theme-color meta), src/legal-page.ts (page CSS, theme-color meta), public/index.html (theme-color meta, boot-script dark value), scripts/gen-icons.mjs (favicon, icons, og image, manifest), public/site.webmanifest, and the marketing brand tokens/assets in site/. Change a brand color in every one. */
  --shell: #f5f4f2;
  --rail-top: #ebe9e6;
  --panel: #fdfdfc;
  --line: #dedbd7;
  --line-soft: #e9e7e4;
  /* Stronger neutral border for the chat chips + composer; dark falls back to the standard line. */
  --line-strong: #d0ccc7;
  /* Rail avatar placeholder: neutral stone disc + readable ink for the initials. */
  --avatar-bg: #d3cfca;
  --avatar-ink: #625f5a;
  /* Neutral gray at ~3.3:1 on the panel so empty check rings actually read as checkboxes. */
  --ring: #918d87;
  --text: #252422;
  /* Dark enough (5:1 on the shell) that small meta text passes WCAG while staying soft. */
  --muted: #6c6863;
  --text-muted-2: #69645f;
  --accent: #d4693e;
  --accent-2: #b34a20;
  --on-accent: #fff;
  --grad: var(--accent);
  --grad-warm: var(--accent);
  --user-bubble: #f7decc;
  --user-text: #93401d;
  --chip-active: #f9e2d6;
  --tag-bg: #f0e7e2;
  --tag-text: #a64b1f;
  --date-bg: #f9e2d6;
  --date-text: #b04013;
  --overdue: #c63f2c;
  --danger-wash: #fae0d8;
  /* "Near limit" amber: --warn is ink (readable on white), --warn-fill is for bars/graphics. */
  --warn: #9a6a15;
  --warn-fill: #e0a23c;
  /* Priority strength must read red > amber > blue; the low blue stays muted slate on purpose. */
  --prio-1: #c63f2c;
  --prio-2: #c5892f;
  --prio-3: #919db8;
  --success: #2f9e5e;
  --success-soft: #e6f4ec;
  /* Goal category accents: functional colors that give goals visual variety (medallions + rings). */
  --cat-health: #2f9e5e;
  --cat-money: #c5892f;
  --cat-learn: #5b7bbd;
  --cat-create: #9c6bb0;
  --cat-health-soft: rgba(47, 158, 94, 0.13);
  --cat-money-soft: rgba(197, 137, 47, 0.14);
  --cat-learn-soft: rgba(91, 123, 189, 0.14);
  --cat-create-soft: rgba(156, 107, 176, 0.14);
  --shadow: 0 10px 30px rgba(55, 52, 48, 0.14);
  --shadow-soft: 0 6px 20px rgba(55, 52, 48, 0.10);
  /* Backdrop wash behind modals. */
  --scrim: rgba(35, 33, 31, 0.4);
  --switch-off: #d8d5d1;

  /* ---- Type scale: font sizes ---- */
  --fs-display: 46px;
  --fs-h1: 26px;
  --fs-h2: 20px;
  --fs-stat: 30px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-2xs: 12px;
  /* Responsive one-offs paired to display/h1 on narrow screens. */
  /* 31px keeps the phone greeting off the screen edges on a 390px viewport. */
  --fs-display-sm: 31px;
  --fs-h1-sm: 22px;

  /* ---- Type scale: weights, line-heights, tracking ---- */
  --fw-normal: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --lh-none: 1;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.5;
  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-eyebrow: 0.05em;
  /* Font family. Swap the first family below to change the app font; everything inherits it. */
  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  /* Radius scale, mapped 1:1 from existing values; one-offs 11/22/24/30px and 50% circles stay inline. */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 18px;
  --radius-3xl: 20px;
  --radius-pill: 999px;

  /* Stacking order. */
  --z-rail: 30;
  --z-fab: 40;
  --z-modal: 50;
  --z-pop: 60;
  --z-toast: 70;
  --z-overlay: 80;

  --rail-w: 200px;
  --page: #e9e7e4;
  /* Horizontal page gutter on mobile (the side margin every view shares on phones). */
  --page-x: 16px;
  /* Bottom padding for desktop scroll views so the last row clears the floating add button (FAB: 24px up + 58px tall). */
  --fab-clear: 100px;

  /* Single-panel page widths: every full-page view (Upcoming, Projects, Tasks, the account family)
     centers its content at --page-w so the column never jumps width as you navigate. --page-w-wide
     is the deliberate exception for the wide admin data table; --form-w caps forms and sparse
     label/value rows so they stay a comfortable measure instead of stretching the full page. */
  --page-w: 760px;
  --page-w-wide: 960px;
  --form-w: 560px;
}