/* web/site/tokens.css
 *
 * THE PALETTE, WRITTEN ONCE.
 *
 * Served at /tokens.css and linked by both front ends — the marketing site in
 * `web/site` and the application in `web/public`. They are separate static
 * roots with separate stylesheets, and before this file they had separate
 * palettes: the site navy on cream, the app a different blue on a different
 * cream. Two copies of a colour are two colours, eventually (§J.22 — config
 * that must be remembered is config that gets forgotten).
 *
 * Values are StatementPro's, deliberately: the two products are separate
 * technically and should look like they came from the same firm. The one
 * intentional divergence is --accent, teal there and ink blue here.
 *
 * THIS FILE IS LIGHT ONLY. The application overrides these tokens under
 * prefers-color-scheme: dark in its own stylesheet, because an accountant
 * reads the review screen for an hour at a time. The marketing site does not,
 * and would break if it did — it carries hand-tinted badge backgrounds that
 * assume a light ground.
 */

:root {
  /* Backgrounds & surfaces */
  --bg-page:        #FAFAF7;
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #FFFFFF;
  --bg-muted:       #F4F2EC;

  /* Text */
  --text-primary:   #1A1A1A;
  --text-secondary: #5C5C5C;
  --text-tertiary:  #8C8C88;
  --text-inverse:   #FFFFFF;

  /* Borders. --border-subtle is the in-table divider the app needs and the
     marketing site never had a use for: lighter than a panel edge, so a
     forty-row schedule reads as rows rather than as a grid. */
  --border-subtle:  #F0EEE8;
  --border-default: #E8E5DD;
  --border-strong:  #D4D0C5;
  --border-focus:   #17466B;

  /* Brand */
  --accent:         #17466B;
  --accent-hover:   #123A59;
  --accent-muted:   #E9EFF4;

  /* Semantic, each with the tint the badge sits on */
  --success:        #2D7A4F;
  --success-bg:     #EDF5F0;
  --warning:        #A85F00;
  --warning-bg:     #FBF3E7;
  --danger:         #A8312D;
  --danger-bg:      #FAEDEC;

  /* Typography */
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'DM Mono', ui-monospace, 'SF Mono', monospace;

  --text-xs:        12px;
  --text-sm:        14px;
  --text-base:      16px;
  --text-lg:        18px;
  --text-xl:        24px;
  --text-2xl:       32px;
  --text-3xl:       48px;
  --text-4xl:       64px;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed:1.6;

  --font-regular:   400;
  --font-medium:    500;

  /* Spacing — 4px grid, deliberate omissions */
  --space-1:  4px;   --space-2:  8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;   --space-6: 32px;   --space-8: 48px;  --space-10: 64px;
  --space-12: 96px;  --space-16: 128px;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 20, 20, 0.06);
  --shadow-lg: 0 12px 32px rgba(20, 20, 20, 0.08);
}