/* Shared by the app and the sign-in page, and served before sign-in: the fonts and the design
   tokens. Anything else the sign-in page needs is in login.css. Kept out of the build so the
   file name never changes and the sign-in page never depends on a hashed asset. */
/* Bricolage Grotesque (the app talking about itself) and Newsreader (the app talking to you),
   both SIL OFL and bundled so the app needs no outside requests. */
@font-face{
  font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;
  src:url(/fonts/bricolage-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:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;
  src:url(/fonts/bricolage-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;
}
@font-face{
  font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/newsreader-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:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/newsreader-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;
}
@font-face{
  font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;
  src:url(/fonts/newsreader-latin-italic.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:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;
  src:url(/fonts/newsreader-latin-ext-italic.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;
}



/* ------------------------------------------------------------------
   1. TOKENS — type, space, shape, motion (theme-independent)
   ------------------------------------------------------------------ */
:root,
.money {
  /* Two voices. Display = the app talking about itself (labels,
     buttons, the one big number). Text = the app talking to you
     (every sentence, every note, every amount in a column). */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Newsreader", "Iowan Old Style", Georgia, serif;
  --num: tabular-nums lining-nums;

  --fs-hero: clamp(76px, 22cqi, 128px);
  --fs-title: 19px;   /* section titles */
  --fs-lead: 22px;    /* hero sentence 1 */
  --fs-read: 19px;    /* hero sentence 2 */
  --fs-quiet: 17px;   /* hero sentence 3, intros */
  --fs-ui: 15px;      /* labels, buttons, inputs */
  --fs-small: 13px;   /* sync line, tags, day headings */
  --fs-micro: 11px;   /* build line */

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --r-tile: 3px;      /* category markers: little Delft tiles */
  --r-cell: 6px;      /* ruled cells on Plan */
  --r-field: 10px;    /* inputs */
  --r-well: 14px;     /* notes, wells */
  --r-sheet: 20px;    /* working surfaces: import, edit, add */
  --r-pill: 999px;    /* buttons, toggles, tags, bars */

  --hit: 44px;        /* minimum touch target */
  --column: 680px;    /* the one reading column */

  --dur: 160ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}


/* ------------------------------------------------------------------
   2. COLOUR — porcelain + cobalt
   Neutrals carry almost no hue so any user colour sits on them.
   Cobalt is reserved for "this is the thing to do / look at".
   ------------------------------------------------------------------ */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F5F7;           /* porcelain */
  --surface: #FFFFFF;      /* working sheets, toasts in dark */
  --well: #EAEDF1;         /* notes, segmented tracks, sunk areas */
  --field: #FFFFFF;        /* input fill */
  --line: #DCE0E6;         /* hairlines */
  --line-strong: #AEB6C2;  /* field edges, ruled cells */
  --ink: #121826;          /* primary text */
  --ink-2: #424B5B;        /* secondary text */
  --ink-3: #5C6575;        /* muted text, still 4.5:1 on --bg */
  --ring: rgb(18 24 38 / .16);   /* hairline around user colours */
  --track: #E2E6EB;        /* empty progress */

  --accent: #2846B4;       /* Delft cobalt */
  --accent-ink: #FFFFFF;   /* text on accent */
  --accent-text: #2642AE;  /* accent used as text */
  --accent-soft: #E4E9FA;
  --focus: rgb(40 70 180 / .32);

  --good: #157347;
  --good-soft: #E1F1E8;
  --bad: #BD3320;
  --bad-soft: #FBE6E1;

  --toast-bg: #121826;
  --toast-ink: #F4F5F7;
  --toast-action: #AFC0FF;
  --shadow: rgb(18 24 38 / .14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0D1118;
    --surface: #161B24;
    --well: #1B212B;
    --field: #10141B;
    --line: #262E3B;
    --line-strong: #4A5466;
    --ink: #E8ECF2;
    --ink-2: #B7C0CD;
    --ink-3: #8D97A8;
    --ring: rgb(255 255 255 / .18);
    --track: #232A35;
    --accent: #8FA6FF;
    --accent-ink: #0B1020;
    --accent-text: #A8BAFF;
    --accent-soft: #1D2647;
    --focus: rgb(143 166 255 / .40);
    --good: #5BC98F;
    --good-soft: #10291D;
    --bad: #FF7A64;
    --bad-soft: #34160F;
    --toast-bg: #E8ECF2;
    --toast-ink: #0D1118;
    --toast-action: #2846B4;
    --shadow: rgb(0 0 0 / .5);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0D1118;
  --surface: #161B24;
  --well: #1B212B;
  --field: #10141B;
  --line: #262E3B;
  --line-strong: #4A5466;
  --ink: #E8ECF2;
  --ink-2: #B7C0CD;
  --ink-3: #8D97A8;
  --ring: rgb(255 255 255 / .18);
  --track: #232A35;
  --accent: #8FA6FF;
  --accent-ink: #0B1020;
  --accent-text: #A8BAFF;
  --accent-soft: #1D2647;
  --focus: rgb(143 166 255 / .40);
  --good: #5BC98F;
  --good-soft: #10291D;
  --bad: #FF7A64;
  --bad-soft: #34160F;
  --toast-bg: #E8ECF2;
  --toast-ink: #0D1118;
  --toast-action: #2846B4;
  --shadow: rgb(0 0 0 / .5);
}

/* The page behind the app, so overscroll and the sign-in page share the ground colour. */
html { background: var(--bg); }
body { margin: 0; }