/*
  AtADollar design tokens.

  The one place where the brand's colours, type, space and shape are decided.
  Every AtADollar product reads these values, so the ten products look like one family.
  Change a value here, never in a product's own stylesheet.

  Light only, on purpose: people pay here, and a light page reads as open and safe to
  non-technical buyers. The neutrals lean slightly green, toward the brand.
  All text colours pass WCAG AA contrast on the backgrounds they are used on.
*/
:root {
  color-scheme: light;

  /* Neutrals, from the page background up to the text. */
  --color-bg: #f6f7f6;
  --color-surface: #ffffff;          /* cards, inputs, buttons, tables */
  --color-surface-raised: #eff2ef;   /* badges, code, hovered buttons */
  --color-surface-overlay: #ffffff;  /* dialogs and menus, with a shadow */
  --color-line: #e3e7e3;             /* borders and dividers */
  --color-line-strong: #cfd5cf;      /* borders of controls */
  --color-text: #0f1a14;
  --color-text-muted: #4d5a52;       /* secondary text */
  --color-text-faint: #687369;       /* hints, dates, footer */

  /* The dollar green. Use it for one thing per screen: the main action or the money.
     The bright green is only a fill (the primary button, the mark), always with dark ink on it.
     Green text uses --color-accent-text, which is dark enough to read on white. */
  --color-accent: #5bd68b;
  --color-accent-hover: #4cc97d;
  --color-accent-soft: #e8f7ee;
  --color-accent-line: #a9dfbe;
  --color-accent-ink: #04210f;       /* text placed on the accent */
  --color-accent-text: #137a41;      /* green text, such as money coming in */

  /* Status colours. Only for state (good, needs attention, failed), never for decoration. */
  --color-good: var(--color-accent-text);
  --color-good-soft: var(--color-accent-soft);
  --color-good-line: var(--color-accent-line);
  --color-warn: #8a5a00;
  --color-warn-soft: #fdf4dc;
  --color-warn-line: #ecd08a;
  --color-bad: #b42318;
  --color-bad-soft: #fdeceb;
  --color-bad-line: #f1b5b0;

  --color-focus: var(--color-accent-text);
  --color-backdrop: rgba(15, 26, 20, 0.4);

  /* Type. Inter ships with the library; the system font is the fallback. Money and codes use mono. */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1.0625rem; /* 17px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.625rem;    /* 26px */
  --text-2xl: clamp(2rem, 6vw, 3.25rem);
  --text-display: clamp(5rem, 22vw, 11rem);
  --text-hero: clamp(2.25rem, 4.6vw, 3.5rem); /* the one big headline of a public page */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.12em;

  /* Space, on a 4px grid. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;   /* a screen preview, a large panel */
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(15, 26, 20, 0.05);
  --shadow-raised: 0 8px 24px rgba(15, 26, 20, 0.07); /* a tile under the pointer */
  --shadow-window: 0 24px 60px rgba(15, 26, 20, 0.12), 0 2px 8px rgba(15, 26, 20, 0.06); /* a screen preview */
  --shadow-overlay: 0 16px 48px rgba(15, 26, 20, 0.16), 0 2px 6px rgba(15, 26, 20, 0.06);

  /* Controls: buttons and inputs share one height, so they line up in a row. */
  --control-height: 2.5rem;
  --control-height-sm: 2rem;
  --control-height-lg: 3rem;

  /* Motion. Short and quiet; turned off when the visitor asks for less motion. */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Layout */
  --page-width: 44rem;       /* reading pages, forms, the account */
  --page-width-wide: 72rem;  /* editors, dashboards and the public site */
  --bar-height: 3.75rem;     /* the app bar at the top of every page */
  --side-width: 13rem;       /* the side menu of a product or the account */
}