/* Pocket tokens: colors, type, radii, shadows, sizes. Layout lives in styles.css. */
:root {
  /* Surfaces */
  --c-cobalt: #2b4bff;
  --c-cobalt-deep: #2340eb;
  --c-cobalt-night: #1a2eb4;
  --c-veil: rgb(255 255 255 / .14);
  --c-veil-strong: rgb(255 255 255 / .22);
  --c-white: #ffffff;
  --c-mist: #f1f3ff;

  /* Ink and accents */
  --c-ink: #111a4d;
  --c-ink-soft: #4b5387;
  --c-sun: #ffd43b;
  --c-sun-press: #f4c317;
  --c-lilac: #c9c3ff;
  --c-muted: #c7d0ff;
  --c-focus: #ffffff;
  --c-focus-light: #2b4bff;
  --c-backdrop: rgb(10 20 110 / .5);
  --shadow-rgb: 10 22 120;

  /* Type */
  --font-ui: -apple-system, "SF Pro Text", "SF Pro Rounded", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-tiny: 12.5px;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-lead: 17px;
  --fs-title: 22px;
  --fs-display: 27px;
  --w-title: 800;

  /* Shape */
  --r-card: 22px;
  --r-pack: 20px;
  --r-sheet: 28px;
  --r-panel: 28px;
  --r-thumb: 10px;
  --r-pill: 999px;

  /* Depth: cobalt-tinted, never grey */
  --shadow-card: 0 20px 34px -16px rgb(var(--shadow-rgb) / .75);
  --shadow-lift: 0 40px 60px -22px rgb(var(--shadow-rgb) / .85);
  --shadow-pill: 0 12px 22px -12px rgb(var(--shadow-rgb) / .9);
  --shadow-sheet: 0 -18px 50px -20px rgb(var(--shadow-rgb) / .6);

  /* Sizes */
  --hit: 48px;
  --pill-h: 58px;
  --bar-h: 56px;
  --tabs-h: 62px;
  --gutter: 16px;
  --edge: 11px;
  --card-max-h: 470px;

  /* Motion curves (the physics lives in app.js springs) */
  --ease-spring: cubic-bezier(.3, 1.45, .5, 1);
  --ease-out: cubic-bezier(.2, .9, .3, 1);
}