/* ==========================================================================
 Matcha: the light theme, and the base every page loads. The other themes
 (theme-hojicha.css, theme-auto.css, and the atmospheric variants) load
 after it and override these tokens on :root. Charts take their colours
 from js/chart-palette.js, and their tooltips these tokens.
========================================================================== */

:root {
  /* Border radius: fin's own, a step rounder than cpl's. Cards, dialogs,
     menus, buttons and inputs take md; the nav's active tab and its masked
     corners lg; small chips sm. */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* Fonts */
  --font-sans: 'Open Sans', sans-serif;
  --font-mono: 'Courier Prime', ui-monospace, monospace;
  --line-height: 1.5;

  /* Body & Navigation: the cards sit lighter than the page, the bar a
     step darker. The active tab is the page's own colour. */
  --background-body: var(--stone-300);
  --background-nav: var(--stone-350);
  --background-nav-tab-active: var(--background-body);
  --color-nav: var(--color-primary);

  /* Typography */
  --color-primary: var(--stone-600);
  --color-secondary: var(--stone-500);
  --color-muted: var(--stone-400);
  --color-faint: var(--stone-350);
  --color-strong: var(--stone-700);
  /* older names, kept for the app stylesheets */
  --color-darker: var(--color-strong);
  --color-lighter: var(--color-muted);

  /* Links */
  --link: var(--lime-800);
  --link-hover: var(--lime-700);

  /* Backgrounds. --background-table-header is left unset: table heads
     fall back to the control colour, and a variant theme sets it. */
  --background-subnav: var(--stone-200);
  --background-subnav-tab-active: var(--background-section);
  --background-control: var(--stone-150);
  --background-section: var(--stone-100);
  --background-light: var(--stone-50);

  /* Buttons (buttons.css): the primary action a lime tint ruled round,
     the secondary one in the control colour, and a destructive one a red
     tint with the danger colour for its text */
  --button-primary-background: var(--lime-100);
  --button-primary-color: var(--color-strong);
  --button-primary-border: var(--lime-200);
  --button-secondary-background: var(--background-control);
  --button-secondary-color: var(--color-primary);
  --button-secondary-border: var(--border-medium);
  --button-danger-background: var(--red-100);
  --button-danger-color: var(--color-danger);
  --button-danger-border: var(--red-200);

  /* Forms & Inputs */
  --input-border: var(--stone-500);
  --input-border-focus: var(--violet-700);
  --input-background: var(--stone-50);
  --input-placeholder: var(--stone-700);
  --input-disabled-background: var(--stone-200);
  --input-disabled-color: var(--stone-700);
  --checkbox-checked: var(--violet-800);

  /* Borders */
  --border-light: var(--stone-200);
  --border-medium: var(--stone-300);
  --border-dark: var(--stone-400);

  /* Shadows & Overlays */
  --shadow-color: rgb(0 0 0 / 14%);
  --shadow-color-heavy: rgb(0 0 0 / 20%);
  --overlay-backdrop: rgb(0 0 0 / 50%);
  --overlay-heavy: rgb(0 0 0 / 40%);

  /* Selection. The atmosphere switch's track when on is a step deeper
     than the selected wash, so it reads as on. */
  --selected-background: var(--violet-100);
  --selected-color: var(--stone-700);
  --selected-border: var(--stone-300);
  --switch-on: var(--violet-300);
  --switch-on-border: var(--violet-400);

  /* Accent (interactive elements) */
  --color-accent: var(--violet-500);
  --color-accent-strong: var(--violet-700);

  /* Status */
  --color-danger: var(--red-700);
  --color-success: var(--green-600);
  --urgent: var(--orange-800);
  --warning: var(--orange-700);
  --success: var(--lime-900);
  --success-hover: var(--lime-700);
  --error: var(--orange-900);
  --error-background: var(--orange-200);
  --info: var(--sky-600);

  /* Alerts */
  --alert-success-bg: var(--lime-100);
  --alert-success-border: var(--lime-200);
  --alert-success-color: var(--green-800);
  --alert-danger-bg: var(--red-100);
  --alert-danger-border: var(--red-200);
  --alert-danger-color: var(--red-800);

  /* Financial */
  --credit: var(--green-700);
  --color-credit: var(--credit);
  --color-debit: var(--error);

  /* Labels & Badges: the 200 tints folded most of the way into the
     control gray, so a page of badges reads as muted, not lit */
  --label-blue: color-mix(in oklab, var(--sky-100) 55%, var(--background-control));
  --label-gray: var(--background-control);
  --label-green: color-mix(in oklab, var(--lime-200) 55%, var(--background-control));
  --label-orange: color-mix(in oklab, var(--orange-200) 55%, var(--background-control));
  --label-purple: color-mix(in oklab, var(--violet-200) 55%, var(--background-control));
  --label-red: color-mix(in oklab, var(--red-200) 55%, var(--background-control));
  --label-yellow: color-mix(in oklab, var(--yellow-200) 55%, var(--background-control));

  /* Badges (interface.css .pill, after Kosmos): the fill shows in full,
     the line is the fill taken a fifth of the way to the strong ink, the
     text is the body's */
  --badge-fill: 100%;
  --label-blue-line: color-mix(in oklch, var(--label-blue) 80%, var(--color-strong));
  --label-gray-line: color-mix(in oklch, var(--label-gray) 80%, var(--color-strong));
  --label-green-line: color-mix(in oklch, var(--label-green) 80%, var(--color-strong));
  --label-orange-line: color-mix(in oklch, var(--label-orange) 80%, var(--color-strong));
  --label-purple-line: color-mix(in oklch, var(--label-purple) 80%, var(--color-strong));
  --label-red-line: color-mix(in oklch, var(--label-red) 80%, var(--color-strong));
  --label-yellow-line: color-mix(in oklch, var(--label-yellow) 80%, var(--color-strong));
  --label-blue-ink: var(--color-primary);
  --label-gray-ink: var(--color-primary);
  --label-green-ink: var(--color-primary);
  --label-orange-ink: var(--color-primary);
  --label-purple-ink: var(--color-primary);
  --label-red-ink: var(--color-primary);
  --label-yellow-ink: var(--color-primary);

  /* Icons */
  --icon-default: var(--color-primary);
  --icon-muted: var(--color-muted);
  --icon-violet: var(--violet-700);
  --icon-yellow: var(--yellow-900);
  --accent-link: var(--link);
  --add: var(--link);

  /* Row highlights (--hl-violet is the older name of --hl-purple) */
  --hl-blue: var(--blue-50);
  --hl-gray: var(--stone-125);
  --hl-green: var(--lime-50);
  --hl-orange: var(--orange-50);
  --hl-purple: var(--purple-50);
  --hl-violet: var(--hl-purple);
  --hl-red: var(--red-50);
  --hl-slate: var(--slate-100);
  --hl-yellow: var(--yellow-50);

  /* Marks: a note's highlight in a transaction description */
  --mark-yellow: var(--yellow-100);

  /* Focus */
  --focus-ring: var(--lime-600);
}