/* ============================================================================
   Design tokens: custom properties only. Loaded first; every other stylesheet
   reads its colours, radii and shadows from here.

   Evergreen (docs/UI_REDESIGN.md): a green-tinted paper, ink text and one
   evergreen accent. Amber (attn) means something needs attention and red (crit)
   means something is broken or wrong; neither marks anything else. The accent
   marks the brand, income and gains.

   Large figures (net worth, balances, an amount spent) are drawn in ink-figure at
   weight 600: at 40-56px, full ink at 700 was harsh enough to tire the eyes. In the
   light theme the glare is also taken out of the ground rather than the text: cards
   are an off-white, not #fff, and the page a step below them; ink-3 and attn are a
   shade darker than they would be on white so they keep 4.5:1 on every fill. The dark
   theme's text is near white, for crisp reading. Every text colour stays above WCAG
   AA on every fill it sits on (test/e2e/contrast_test.go).

   Three viewer states are covered: an explicit choice stamps data-theme on
   <html>, and the default "system" setting stamps nothing, leaving only
   prefers-color-scheme to separate light from dark. Only the palette block
   differs between themes; everything after it is derived from the palette.
   ============================================================================ */
:root {
  color-scheme: light;

  --paper: #eceee9;
  --surface: #f7f7f4;
  --sunk: #e5e7e1;
  --ink: #15171c;
  --ink-figure: #1c2824;
  --ink-2: #474d58;
  --ink-3: #616671;
  --line: #d8dbd4;
  --accent: #0e6b57;
  --accent-soft: #e1f0ea;
  --attn: #975509;
  --attn-soft: #fbefdd;
  --crit: #bf3328;
  --crit-soft: #fbe8e5;

  /* What a shadow is cast in: ink in the light, black in the dark. */
  --shade: 21, 23, 28;
  --shade-strength: 1;
  --scrim-alpha: 0.32;
}

/* Dark, for viewers who never stamped a preference (system default). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper: #121412;
    --surface: #1d201e;
    --sunk: #222623;
    --ink: #f6f7f4;
    --ink-figure: #eef0eb;
    --ink-2: #b9beb7;
    --ink-3: #8a908a;
    --line: #2e332f;
    --accent: #4fc4a2;
    --accent-soft: #163a30;
    --attn: #e7a54a;
    --attn-soft: #3a2a14;
    --crit: #f0776a;
    --crit-soft: #3d1c19;

    --shade: 0, 0, 0;
    --shade-strength: 3;
    --scrim-alpha: 0.6;
  }
}

/* Dark, chosen explicitly — wins over a light OS setting. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #121412;
  --surface: #1d201e;
  --sunk: #222623;
  --ink: #f6f7f4;
  --ink-figure: #eef0eb;
  --ink-2: #b9beb7;
  --ink-3: #8a908a;
  --line: #2e332f;
  --accent: #4fc4a2;
  --accent-soft: #163a30;
  --attn: #e7a54a;
  --attn-soft: #3a2a14;
  --crit: #f0776a;
  --crit-soft: #3d1c19;

  --shade: 0, 0, 0;
  --shade-strength: 3;
  --scrim-alpha: 0.6;
}

/* Derived tokens. Each theme's values follow from its palette above, so nothing
   here is repeated per theme. */
:root {
  /* Borders of the soft fills: the hue, a third of the way in from the fill. */
  --accent-line: color-mix(in srgb, var(--accent) 30%, var(--accent-soft));
  --attn-line: color-mix(in srgb, var(--attn) 30%, var(--attn-soft));
  --crit-line: color-mix(in srgb, var(--crit) 30%, var(--crit-soft));
  --line-strong: color-mix(in srgb, var(--line) 70%, var(--ink-3));

  /* Three elevations: flat (none), card, sheet. */
  --shadow-card: 0 1px 2px rgba(var(--shade), calc(0.05 * var(--shade-strength)));
  --shadow-sheet: 0 12px 32px rgba(var(--shade), calc(0.12 * var(--shade-strength))),
                  0 2px 8px rgba(var(--shade), calc(0.05 * var(--shade-strength)));

  /* Type. Bricolage Grotesque for headings and headline figures, Geist for text, Geist
     Mono for small uppercase labels; each falls back to the system's own face. */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-text: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Six sizes. The hero is 40px on a phone and 56px wider up; --fs-hero-sm is the phone
     size, for a headline figure that shares its row with others. Labels are 12px, not
     the 11 first drawn: test/e2e/contrast_test.go holds every text run to 12px or more. */
  --fs-hero: 56px;
  --fs-hero-sm: 40px;
  --fs-title: 24px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-meta: 13px;
  --fs-label: 12px;

  /* Spacing steps: 4, 8, 12, 16, 24, 32, 48. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Motion. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 180ms;
  /* A fade alone, with nothing moving: on --ease-out it is 90% done in 60ms, a snap to
     the eye, so it takes a more even curve and a little longer. */
  --fade-dur: 260ms;
  --ease-fade: cubic-bezier(0, 0, 0.58, 1);
  /* A tab's content rising into place as it opens, and the rows of a list entering one
     after another (row-enter in components.css): how long each takes, how far it rises,
     and the gap between one row and the next. */
  --tab-enter-dur: 0.25s;
  --tab-enter-rise: 8px;
  /* A phone's sheet rising from the bottom edge, and going back down, at about an
     iPhone's own pace and on the curve its sheets follow: quick to start, long and soft
     to settle. */
  --sheet-in-dur: 0.5s;
  --sheet-out-dur: 0.35s;
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --row-enter-dur: 0.32s;
  --row-enter-rise: 4px;
  --row-enter-step: 24ms;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* The names the stylesheets and scripts were written against, pointed at the
     palette. */
  --bg-primary: var(--paper);
  --bg-card: var(--surface);
  --bg-elevated: var(--surface);
  --bg-inset: var(--sunk);
  --bg-track: var(--sunk);
  --bg-frost: color-mix(in srgb, var(--surface) 85%, transparent);
  --bg-frost-strong: color-mix(in srgb, var(--surface) 96%, transparent);
  --bg-pill-idle: transparent;
  --bg-scrim: rgba(var(--shade), var(--scrim-alpha));

  --border-color: var(--line);
  --border-subtle: var(--line);
  --border-strong: var(--line-strong);
  --border-hairline: var(--line);
  --border-focus: color-mix(in srgb, var(--accent) 45%, transparent);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  /* Text on a solid fill: ink, accent, attn or crit. */
  --text-on-accent: var(--paper);

  --accent-blue: var(--accent);
  --accent-blue-hover: color-mix(in srgb, var(--accent) 85%, var(--ink));
  /* Primary buttons and the selected tab are ink, not accent. */
  --accent-fill: var(--ink);
  --accent-fill-hover: color-mix(in srgb, var(--ink) 85%, var(--paper));
  --accent-green: var(--accent);
  --accent-red: var(--crit);
  --accent-amber: var(--attn);

  /* Tinted pills. Accent for good news and the brand, attn and crit for problems,
     and everything else a quiet neutral, so a row of them reads as text. */
  --tint-neutral-bg: var(--sunk);
  --tint-neutral-fg: var(--ink-2);
  --tint-blue-bg: var(--accent-soft);     --tint-blue-border: var(--accent-line);
  --tint-green-bg: var(--accent-soft);    --tint-green-border: var(--accent-line);    --tint-green-fg: var(--accent);
  --tint-yellow-bg: var(--attn-soft);
  --tint-amber-bg: var(--attn-soft);      --tint-amber-border: var(--attn-line);      --tint-amber-fg: var(--attn);
  --tint-orange-fg: var(--attn);
  --tint-red-bg: var(--crit-soft);        --tint-red-border: var(--crit-line);        --tint-red-fg: var(--crit);

  /* Solid fills that carry --text-on-accent. */
  --solid-success-bg: var(--accent);
  --solid-warn-bg: var(--attn);
  --solid-danger-bg: var(--crit);

  /* Charts. charts.js strokes with these by name. */
  --chart-line: var(--accent);
  --chart-fill-top: color-mix(in srgb, var(--accent) 22%, transparent);
  --chart-fill-bottom: color-mix(in srgb, var(--accent) 0%, transparent);
  --chart-grid: color-mix(in srgb, var(--ink) 9%, transparent);
  --chart-axis-text: var(--ink-3);
  /* The series of the balance-sheet history chart and the dashboard's composition bar,
     named by what they show: net worth in the accent, assets a paler accent, and
     liabilities a quiet ink. Red stays out of charts; a liability is not an error. */
  --chart-net-worth: var(--accent);
  --chart-assets: color-mix(in srgb, var(--accent) 45%, var(--surface));
  --chart-liabilities: var(--ink-3);

  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-sheet);

  /* The sign-in backdrop: the page ground, lifted a little behind the card. */
  --auth-scrim: radial-gradient(circle at 50% 30%, var(--accent-soft) 0%, var(--paper) 68%);

  /* The sign-in button, in the colours Google's branding guidelines give for its
     light and dark buttons. They are Google's, not this palette's, on purpose: the
     button has to read as Google's own. */
  --gbtn-bg: #ffffff;
  --gbtn-border: #747775;
  --gbtn-fg: #1f1f1f;
}

@media (max-width: 600px) {
  :root {
    --fs-hero: 40px;
  }
}

/* On a phone the desktop's entrances were too slight to see: a few pixels across a
   small screen, over before the eye caught them. They rise further and take a little
   longer there, still under half a second. */
@media (max-width: 768px) {
  :root {
    --tab-enter-dur: 0.35s;
    --tab-enter-rise: 16px;
    --row-enter-dur: 0.45s;
    --row-enter-rise: 12px;
    --row-enter-step: 40ms;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gbtn-bg: #131314;
    --gbtn-border: #8e918f;
    --gbtn-fg: #e3e3e3;
  }
}

:root[data-theme="dark"] {
  --gbtn-bg: #131314;
  --gbtn-border: #8e918f;
  --gbtn-fg: #e3e3e3;
}