/* The website's tokens, written to site/assets/tokens.css by website/build.mjs. They are the site's own:
   cool neutrals and a larger display scale. The extension keeps design/tokens.css, which this file does
   not change. Dark values follow prefers-color-scheme; the site has no theme switch, because it runs no
   script. website/site.css uses only these custom properties. */

:root {
  color-scheme: light dark;
  --color-bg: #FFFFFF;
  --color-bg-subtle: #F7F8FA;
  --color-bg-muted: #EEF0F3;
  --color-code-bg: #EEF0F3;
  --color-text: #1a1c1f;
  --color-text-secondary: #3d4450;
  --color-text-muted: #4b5563;
  --color-border: #7d8694;
  --color-separator: #d0d5dd;
  --color-accent: #075E54;
  --color-focus: #128C7E;
  --color-button-primary: #25D366;
  --color-button-primary-hover: #1EBE5A;
  --color-button-primary-pressed: #1AA851;
  --color-button-primary-border: #128C7E;
  --color-on-accent: #0B1F17;
  --color-accent-subtle: #E7F8EE;
  --color-on-accent-subtle: #075E54;
  --color-band: #075E54;
  --color-on-band: #FFFFFF;
  --color-on-band-muted: #D4EFE6;
  --color-success: #0f6b3c;
  --color-success-bg: #e7f6ee;
  --color-danger: #b42318;
  --color-danger-bg: #fdeceb;
  --color-warning: #8a5a00;
  --color-warning-bg: #fff6e0;

  --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.18);
  --shadow-shot: 0 0 0 1px rgb(0 0 0 / 0.06), 0 30px 60px -12px rgb(50 50 93 / 0.25), 0 18px 36px -18px rgb(0 0 0 / 0.3);

  /* Product shots, shown as CSS backgrounds (the pages hold no <img>). */
  --shot-export: url("/assets/shots/export-done-light.png");
  --shot-upgrade: url("/assets/shots/upgrade-free-light.png");
  --shot-export-ratio: 420 / 703;
  --shot-upgrade-ratio: 780 / 561;
  --shot-export-width: 420px;
  --shot-upgrade-width: 780px;

  /* Icons, used as CSS masks or backgrounds (the pages hold no <svg>). */
  --icon-mark: url("/assets/icon.svg");
  --icon-check: url("/assets/icons/check.svg");
  --icon-file: url("/assets/icons/file.svg");
  --icon-clipboard: url("/assets/icons/clipboard.svg");
  --icon-globe: url("/assets/icons/globe.svg");
  --icon-table: url("/assets/icons/table.svg");
  --icon-menu: url("/assets/icons/menu.svg");
  --icon-close: url("/assets/icons/close.svg");

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --font-regular: 400;
  --font-semibold: 600;
  --text-xs: 0.75rem;
  --leading-xs: 1.4;
  --text-sm: 0.875rem;
  --leading-sm: 1.45;
  --text-md: 1rem;
  --leading-md: 1.5;
  --text-lg: 1.125rem;
  --leading-lg: 1.6;
  --text-xl: 1.25rem;
  --leading-xl: 1.3;
  --text-2xl: 1.5rem;
  --leading-2xl: 1.3;
  --text-3xl: 1.875rem;
  --leading-3xl: 1.2;
  --text-4xl: 2.25rem;
  --leading-4xl: 1.15;
  --text-5xl: 3rem;
  --leading-5xl: 1.1;
  --text-6xl: 3.75rem;
  --leading-6xl: 1.08;
  /* The home headline: between 6xl and 5xl, so the sentence wraps to at most three lines at 1440. */
  --text-hero: 3.25rem;
  --leading-hero: 1.12;
  --tracking-display: -0.02em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-mark: 7px;

  --border-width: 1px;
  --border-strong: 2px;
  --size-min: 320px;
  --size-prose: 72ch;
  --size-tagline: 40ch;
  --size-wide: 1200px;
  --size-mark: 32px;
  --size-mark-sm: 28px;
  --size-icon: 20px;
  --size-icon-sm: 14px;
  --size-step: 36px;
  --size-control: 44px;
  --size-control-lg: 48px;
  --size-toc-row: 36px;
  --size-header: 72px;
  --size-header-sm: 64px;
  --size-focus: 2px;
  --size-focus-offset: 2px;
  --gutter: 24px;
  --page-pad: 32px;
  --gutter-sm: 16px;
  --page-pad-sm: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121316;
    --color-bg-subtle: #1C1E22;
    --color-bg-muted: #2A2D33;
    --color-code-bg: #0e1013;
    --color-text: #eceef1;
    --color-text-secondary: #c5cad1;
    --color-text-muted: #9aa3ad;
    --color-border: #707886;
    --color-separator: #3a3f47;
    --color-accent: #25D366;
    --color-focus: #25D366;
    --color-button-primary: #25D366;
    --color-button-primary-hover: #1EBE5A;
    --color-button-primary-pressed: #1AA851;
    --color-button-primary-border: #25D366;
    --color-on-accent: #0B1F17;
    --color-accent-subtle: #10261C;
    --color-on-accent-subtle: #A6F0C4;
    --color-band: #075E54;
    --color-on-band: #FFFFFF;
    --color-on-band-muted: #D4EFE6;
    --color-success: #7dcea0;
    --color-success-bg: #13291d;
    --color-danger: #f3a29b;
    --color-danger-bg: #2a1518;
    --color-warning: #f0c36a;
    --color-warning-bg: #2a2110;

    --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.5);
    --shadow-shot: 0 0 0 1px rgb(255 255 255 / 0.08), 0 30px 60px -12px rgb(0 0 0 / 0.6), 0 18px 36px -18px rgb(0 0 0 / 0.5);

    --shot-export: url("/assets/shots/export-done-dark.png");
    --shot-upgrade: url("/assets/shots/upgrade-free-dark.png");
  }
}