/*
  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);

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

  --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-pill: 999px;

  --shadow-card: 0 1px 2px rgba(15, 26, 20, 0.05);
  --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;

  /* 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: 68rem;  /* editors and dashboards */
}