/*
 * GENERATED by `python manage.py build_tokens` from
 * docs/design-system/tokens.json. Do not edit by hand — change tokens.json and
 * run the command again. tests/test_design_tokens.py fails if this file and
 * tokens.json disagree.
 *
 * Light values sit on :root. Dark values sit under :root[data-theme="dark"];
 * nothing sets data-theme yet, so the app ships light only.
 */

:root {
  /* Colour and shadow (light) */
  --surface-page: #f2f2f7;
  --surface-card: #ffffff;
  --surface-sunken: #f2f2f7;
  --border: #e3e3e8;
  --divider: #ededf0;
  --control-border: #c7c7cc;
  --ink: #1c1c1e;
  --ink-muted: #6b6b70;
  --ink-faint: #8e8e93;
  --accent: #0060df;
  --accent-fill: #0060df;
  --on-accent: #ffffff;
  --accent-tint: #e8f0fe;
  --danger: #b42318;
  --danger-tint: #fdecec;
  --warning: #b54708;
  --warning-tint: #fef3e2;
  --success: #1a7e36;
  --success-tint: #e6f4ea;
  --badge: #d92d20;
  --overlay: rgba(20, 20, 24, 0.42);
  --share-1: #0060df;
  --share-2: #2f78e5;
  --share-3: #5891eb;
  --share-4: #7eaaf0;
  --share-5: #a3c3f4;
  --share-6: #bfd5f7;
  --share-7: #d6e4fa;
  --share-rest: #e3e3e8;
  --shadow-sheet: 0 -8px 24px rgba(0, 0, 0, 0.12);
  --shadow-segment: 0 1px 2px rgba(0, 0, 0, 0.12);

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --type-title-size: 20px;
  --type-title-line: 25px;
  --type-title-weight: 600;
  --type-heading-size: 16px;
  --type-heading-line: 22px;
  --type-heading-weight: 600;
  --type-section-label-size: 13px;
  --type-section-label-line: 18px;
  --type-section-label-weight: 600;
  --type-section-label-tracking: 0.06em;
  --type-body-size: 15px;
  --type-body-line: 21px;
  --type-body-weight: 400;
  --type-body-sm-size: 14px;
  --type-body-sm-line: 20px;
  --type-body-sm-weight: 400;
  --type-meta-size: 13px;
  --type-meta-line: 18px;
  --type-meta-weight: 400;
  --type-caption-size: 12px;
  --type-caption-line: 16px;
  --type-caption-weight: 500;
  --type-number-size: 20px;
  --type-number-line: 26px;
  --type-number-weight: 600;
  --type-tab-label-size: 11px;
  --type-tab-label-line: 13px;
  --type-tab-label-weight: 500;
  --type-input-size: 16px;
  --type-input-line: 22px;
  --type-input-weight: 400;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Size */
  --tap-min: 44px;
  --topbar: 52px;
  --tabbar: 64px;
  --row-1: 52px;
  --row-2: 64px;
  --table-row: 44px;
  --button: 40px;
  --button-compact: 36px;
  --sidebar: 240px;
  --rail: 80px;
  --content-max: 1200px;

  /* Breakpoint */
  --bp-phone: 640px;
  --bp-laptop: 1024px;
}

:root[data-theme="dark"] {
  /* Colour and shadow (dark) */
  --surface-page: #0b0b0d;
  --surface-card: #1c1c1e;
  --surface-sunken: #2c2c2e;
  --border: #38383a;
  --divider: #2c2c2e;
  --control-border: #545458;
  --ink: #f2f2f7;
  --ink-muted: #a1a1a6;
  --ink-faint: #6e6e73;
  --accent: #6aa8ff;
  --accent-fill: #1f6feb;
  --on-accent: #ffffff;
  --accent-tint: #13284a;
  --danger: #ff8a80;
  --danger-tint: #3a1715;
  --warning: #fdb022;
  --warning-tint: #3a2a10;
  --success: #4ade80;
  --success-tint: #10301b;
  --badge: #d92d20;
  --overlay: rgba(0, 0, 0, 0.6);
  --share-1: #6aa8ff;
  --share-2: #5791ec;
  --share-3: #4a7fd6;
  --share-4: #3e6dbd;
  --share-5: #345ca1;
  --share-6: #2b4c86;
  --share-7: #243f6c;
  --share-rest: #3a3a3c;
  --shadow-sheet: 0 -8px 24px rgba(0, 0, 0, 0.5);
  --shadow-segment: 0 1px 2px rgba(0, 0, 0, 0.4);
}