/* Readyish design system. Every view reads from here: no loose values in the views. */
:root {
  /* Ink */
  --ink: #1e2046;
  --ink-2: #4a4e72;
  --ink-3: #8388ab;
  --ink-4: #b4b8d2;

  /* Surfaces */
  --surface: #ffffff;
  --bg: #f6f6fc;
  --line: #e4e6f2;
  --line-strong: #d3d6e8;

  /* Brand */
  --brand: #5457f0;
  --brand-lip: #3b3dc2;
  --brand-soft: #eeeeff;
  --brand-softer: #f6f6ff;

  /* Accents */
  --sun: #ffc531;
  --sun-lip: #dd9e00;
  --sun-soft: #fff5d6;
  --sun-ink: #8a5f00;

  --coral: #ff6b5e;
  --coral-lip: #d8483c;
  --coral-soft: #ffeceb;
  --coral-ink: #b3342a;

  --mint: #12c29b;
  --mint-lip: #0b9a7a;
  --mint-soft: #e1f8f2;
  --mint-ink: #087a61;

  --sky: #2fb4f5;
  --sky-lip: #1790cc;
  --sky-soft: #e4f5fe;
  --sky-ink: #0f6f9e;

  /* Type */
  --font: "Rubik", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 800;
  --track-caps: 0.06em;

  /* Space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* Shape */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;
  --border: 2px;
  --lip: 4px;

  /* Elevation */
  --shadow-pop: 0 18px 40px -18px rgba(30, 32, 70, 0.35);
  --shadow-float: 0 8px 22px -12px rgba(30, 32, 70, 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 420ms;
  --hover-scale: 1.03;
  --press-scale: 0.96;

  /* Layout */
  --side-w: 264px;
  --col-w: 620px;
  --rail-w: 336px;
  --tabbar-h: 68px;
  --acct-w: 288px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
    --hover-scale: 1;
    --press-scale: 1;
  }
}