/* Filterping design tokens for the website.
   Source of truth: mobile/src/ui/theme.ts (itself mapped from the redesign handoff's design-tokens.css).
   Keep every value here in sync with theme.ts; the site and the app must read as one product.
   Names follow design-tokens.css (--color-accent-700 = theme.ts colors.accent700). */

:root {
  /* colors (theme.ts `colors`) */
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: rgba(29, 31, 32, 0.16);
  --color-corner-mark: rgba(29, 31, 32, 0.55);
  --color-pressed-neutral: rgba(29, 31, 32, 0.14);
  --color-pressed-accent: rgba(89, 128, 166, 0.18);

  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  /* status model (theme.ts `statusColors`) */
  --status-overdue-block-bg: var(--color-accent-900);
  --status-overdue-block-fg: var(--color-bg);
  --status-overdue-block-border: var(--color-accent-900);
  --status-overdue-tag-bg: var(--color-accent-900);
  --status-overdue-tag-fg: var(--color-bg);
  --status-overdue-tag-border: var(--color-accent-900);
  --status-overdue-number: var(--color-accent-900);

  --status-due-soon-block-bg: var(--color-accent-100);
  --status-due-soon-block-fg: var(--color-accent-900);
  --status-due-soon-block-border: var(--color-accent-400);
  --status-due-soon-tag-bg: var(--color-accent-100);
  --status-due-soon-tag-fg: var(--color-accent-800);
  --status-due-soon-tag-border: var(--color-accent-300);
  --status-due-soon-number: var(--color-accent-700);

  --status-good-block-bg: transparent;
  --status-good-block-fg: var(--color-text);
  --status-good-block-border: var(--color-divider);
  --status-good-tag-bg: transparent;
  --status-good-tag-fg: var(--color-accent-700);
  --status-good-tag-border: var(--color-accent);
  --status-good-number: var(--color-text);

  /* type (theme.ts `fonts`; sizes from the handoff token list) */
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-h1: 40px;
  --text-h2: 34px;
  --text-h3: 24px;
  --text-h4: 22px;
  --text-h5: 20px;
  --num-hero: 120px;
  --num-large: 80px;
  --num-medium: 60px;
  --num-small: 30px;
  --text-17: 17px;
  --text-16: 16px;
  --text-15: 15px;
  --text-14: 14px;
  --text-13: 13px;
  --text-12: 12px;
  --text-11: 11px;

  /* spacing (design-tokens.css; the app lays out in these multiples) */
  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  /* square everywhere: theme.ts has no radius scale */
  --radius: 0;

  /* shadows (theme.ts `shadowSpec`, iOS values) */
  --shadow-sm: 0 1px 2px rgba(43, 43, 45, 0.14);
  --shadow-md: 0 3px 10px rgba(43, 43, 45, 0.16);
  --shadow-lg: 0 12px 32px rgba(43, 43, 45, 0.22);

  /* layout (theme.ts `layout`) */
  --screen-padding-x: 20px;
  --min-hit-target: 44px;
  --tab-bar-height: 84px;
  --scan-raise: 18px;
  --header-height: 56px;
}