/*
 * Design tokens, hand-ported one-to-one from the mobile theme
 * (rubbishapp-mobile/src/theme/{colors,typography,spacing,radii}.ts).
 * Names match the theme source so a reader can cross-reference; edit both
 * when either changes.
 *
 * Tokens marked "web-only" below have no counterpart in the app theme.
 */
:root {
  /* Colours */
  --paper: #ebe5de;
  --paper-light: #f7f1ea;
  --paper-sunken: #d9d3cc;
  --paper-raised: #fffdfb;
  --white: #fff9f3;

  --ink: #272e38;
  --ink-soft: #474e57;
  --ink-muted: #5e646c;
  --ink-faint: #7c8187;

  --red: #b91c1c;
  --red-soft: #ffe0db;

  /* Wordmark only, never a ground - see rubbishapp-mobile/assets/brand/README.md */
  --gold: #fbb040;

  /* Spacing */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* The app uses the platform font (San Francisco / Roboto); the site
     follows the same system-font stack rather than loading a webfont. */
  --font:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography: size / line-height / weight / letter-spacing, paired per
     scale step. */
  --text-display-large-size: 32px;
  --text-display-large-line: 38px;
  --text-display-large-weight: 700;
  --text-display-large-tracking: -0.4px;

  --text-display-medium-size: 26px;
  --text-display-medium-line: 32px;
  --text-display-medium-weight: 700;
  --text-display-medium-tracking: -0.3px;

  --text-large-title-size: 34px;
  --text-large-title-line: 41px;
  --text-large-title-weight: 700;
  --text-large-title-tracking: -0.4px;

  --text-title1-size: 28px;
  --text-title1-line: 34px;
  --text-title1-weight: 700;
  --text-title1-tracking: -0.3px;

  --text-title2-size: 22px;
  --text-title2-line: 28px;
  --text-title2-weight: 500;
  --text-title2-tracking: -0.2px;

  --text-title3-size: 20px;
  --text-title3-line: 25px;
  --text-title3-weight: 600;

  --text-headline-size: 17px;
  --text-headline-line: 22px;
  --text-headline-weight: 600;

  --text-body-size: 17px;
  --text-body-line: 22px;
  --text-body-weight: 400;

  --text-subhead-size: 15px;
  --text-subhead-line: 20px;
  --text-subhead-weight: 400;

  --text-footnote-size: 13px;
  --text-footnote-line: 18px;
  --text-footnote-weight: 400;

  --text-caption1-size: 12px;
  --text-caption1-line: 16px;
  --text-caption1-weight: 400;

  --text-caption2-size: 11px;
  --text-caption2-line: 13px;
  --text-caption2-weight: 400;

  /*
   * Web-only: the site is laid on the ink ground the share card and the
   * splash use, so a screenshot of the app reads as a lit object on it.
   * These name the role rather than the paper/ink pair, because on this
   * ground the pair is reversed - ink is the surface and paper the type.
   * The two literals are ink lifted just enough to separate a card from
   * the ground and to draw a line on it; neither exists in the app theme,
   * which has only the one ground.
   */
  --surface: var(--ink); /* web-only */
  --surface-raised: #323a46; /* web-only */
  --surface-line: #3d4653; /* web-only */
  --on-surface: var(--paper-light); /* web-only */
  --on-surface-muted: #b9b3ac; /* web-only */

  /* Web-only: the app has no page width to cap, the site does. */
  --content-max-width: 960px; /* web-only */

  /* Web-only: the bin at the head of the hero copy. */
  --hero-mark-height: 144px; /* web-only */
  --hero-mark-height-large: 216px; /* web-only */

  /*
   * Web-only: the hero headline. The app's display and large-title steps
   * scaled up half again - a phone screen has to fit the headline under a
   * status bar, the hero has the top of a page. Set solid, since the
   * headline is broken into lines by hand rather than by wrapping.
   */
  --text-hero-size: 40px; /* web-only */
  --text-hero-line: 40px; /* web-only */
  --text-hero-tracking: -0.6px; /* web-only */
  --text-hero-size-large: 51px; /* web-only */
  --text-hero-line-large: 51px; /* web-only */
  --text-hero-tracking-large: -0.6px; /* web-only */

  /* Web-only: the hero subhead sits a step below the ramp's 600 so it
     reads as a caption to the headline rather than a heading of its own. */
  --text-hero-subhead-weight: 500; /* web-only */

  /*
   * Web-only: the rendered phone in the hero. The plain value is the
   * narrow-screen one and "-large" takes over at the breakpoint, in site.css.
   */
  --phone-width: 256px; /* web-only */
  --phone-width-large: 336px; /* web-only */

  /* Web-only: store badge height. Both supplied files are cropped to their
     black plate, so one height gives both the same size. Apple's minimum
     badge height is 40px; do not go below it. */
  --badge-height: 48px; /* web-only */
  /* Web-only: single layout breakpoint, see site.css. */
  /* --breakpoint: 720px; (web-only, not a custom property - used as a literal in @media) */
}