/* Tip X — design tokens
   "Quiet confidence. Paper, ink and one brass line."
   Light is default; dark follows the OS unless the user picks a theme (data-theme on <html>). */

:root {
  color-scheme: light;

  /* paper & ink */
  --bg: #F5F3EE;            /* warm limestone */
  --bg-deep: #EDE9E0;       /* recessed paper (wells, rail hover) */
  --surface: #FFFFFF;
  --surface-2: #FAF8F4;
  --surface-3: #F2EFE8;
  --ink: #15171C;
  --ink-2: #4A4F5A;
  --muted: #6B717C;         /* AA on bg & surface */
  --faint: #9A9FA8;         /* decorative only, never text that matters */
  --line: #E5E0D6;
  --line-2: #D6CFC2;
  --grid: rgba(14, 90, 99, .055);   /* blueprint grid on the page */

  /* one calm accent (petrol) */
  --accent: #0E5A63;
  --accent-ink: #0A434A;
  --accent-soft: #E3EEEE;
  --accent-tint: #F0F6F5;
  --on-accent: #FFFFFF;

  /* brass — money, savings, the one line */
  --brass: #A97B2F;
  --brass-ink: #7D5A1E;
  --brass-soft: #F6EEDD;

  /* status (always paired with icon + word) */
  --crit: #B42318;  --crit-bg: #FCEBE9;  --crit-line: #F2C7C2;
  --high: #B54D0C;  --high-bg: #FDEFE3;  --high-line: #F3D2B8;
  --review: #7A5E00; --review-bg: #FFF6D6; --review-line: #EEDC9C;
  --ok: #1E7A46;    --ok-bg: #E7F3EC;    --ok-line: #BFE0CC;
  --info: #0E5A63;  --info-bg: #E3EEEE;

  --focus: #0E5A63;
  --scrim: rgba(21, 23, 28, .38);

  /* type */
  --f-display: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-ui: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-num: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;   /* same family; numbers use tabular-nums */
  --f-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-base: 15px;
  --fs-md: 16.5px;
  --fs-lg: 19px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: 38px;
  --lh: 1.6;
  --lh-tight: 1.2;

  /* space (8px grid, with 4 for hairline rhythm) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;

  /* shape */
  --r-card: 14px;
  --r-ctl: 10px;
  --r-sm: 7px;
  --r-pill: 999px;

  /* one soft elevation (+ an overlay level for popovers) */
  --shadow: 0 1px 0 rgba(21,23,28,.03), 0 1px 2px rgba(21,23,28,.04), 0 6px 18px -8px rgba(21,23,28,.10);
  --shadow-pop: 0 2px 6px rgba(21,23,28,.06), 0 24px 60px -18px rgba(21,23,28,.32);

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 140ms;
  --t: 220ms;
  --t-slow: 420ms;

  /* shell */
  --rail-w: 244px;
  --rail-w-collapsed: 76px;
  --top-h: 64px;
  --tab-h: 64px;
  --content-max: 1360px;
  --gutter: 32px;

  /* bridge bars */
  --bar-strong: #15171C; --bar-base: #6B717C;

  /* chart palette (categorical, calm) */
  --c1: #0E5A63; --c2: #A97B2F; --c3: #5B6B8C; --c4: #7E8F6A; --c5: #9C5D4E; --c6: #4A4F5A;
}

/* ---------- dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E1013; --bg-deep: #0A0C0E;
    --surface: #161A1F; --surface-2: #1A1F25; --surface-3: #20262D;
    --ink: #ECEDEF; --ink-2: #C3C7CE; --muted: #959BA5; --faint: #6A717B;
    --line: #262B33; --line-2: #343A44;
    --grid: rgba(79, 179, 188, .045);
    --accent: #4FB3BC; --accent-ink: #8FD3D9; --accent-soft: #15292C; --accent-tint: #122124; --on-accent: #0A1A1C;
    --brass: #D8AE62; --brass-ink: #E7C88E; --brass-soft: #2A2214;
    --crit: #F2857C; --crit-bg: #2E1716; --crit-line: #5A2622;
    --high: #F0A060; --high-bg: #2D1E10; --high-line: #573719;
    --review: #E3C452; --review-bg: #2A2410; --review-line: #4E4318;
    --ok: #6CC791; --ok-bg: #12261A; --ok-line: #1F4A31;
    --info: #4FB3BC; --info-bg: #15292C;
    --focus: #6FC6CE;
    --scrim: rgba(0,0,0,.55);
    --shadow: 0 1px 0 rgba(0,0,0,.25), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-pop: 0 2px 8px rgba(0,0,0,.4), 0 30px 70px -20px rgba(0,0,0,.75);
    --bar-strong: #B9C0C9; --bar-base: #5E6773;
    --c1: #4FB3BC; --c2: #D8AE62; --c3: #8C9CC0; --c4: #A9BB92; --c5: #D08E7E; --c6: #C3C7CE;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1013; --bg-deep: #0A0C0E;
  --surface: #161A1F; --surface-2: #1A1F25; --surface-3: #20262D;
  --ink: #ECEDEF; --ink-2: #C3C7CE; --muted: #959BA5; --faint: #6A717B;
  --line: #262B33; --line-2: #343A44;
  --grid: rgba(79, 179, 188, .045);
  --accent: #4FB3BC; --accent-ink: #8FD3D9; --accent-soft: #15292C; --accent-tint: #122124; --on-accent: #0A1A1C;
  --brass: #D8AE62; --brass-ink: #E7C88E; --brass-soft: #2A2214;
  --crit: #F2857C; --crit-bg: #2E1716; --crit-line: #5A2622;
  --high: #F0A060; --high-bg: #2D1E10; --high-line: #573719;
  --review: #E3C452; --review-bg: #2A2410; --review-line: #4E4318;
  --ok: #6CC791; --ok-bg: #12261A; --ok-line: #1F4A31;
  --info: #4FB3BC; --info-bg: #15292C;
  --focus: #6FC6CE;
  --scrim: rgba(0,0,0,.55);
  --shadow: 0 1px 0 rgba(0,0,0,.25), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-pop: 0 2px 8px rgba(0,0,0,.4), 0 30px 70px -20px rgba(0,0,0,.75);
  --bar-strong: #B9C0C9; --bar-base: #5E6773;
  --c1: #4FB3BC; --c2: #D8AE62; --c3: #8C9CC0; --c4: #A9BB92; --c5: #D08E7E; --c6: #C3C7CE;
}

@media (max-width: 759px) {
  :root { --fs-base: 16px; --gutter: 16px; --top-h: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; }
}