/*
 * The theme. One file, the single source of truth for every front end: the web app and the public site.
 * Values come from docs/visuals/design-tokens.md (visual concept v2). Change them there first.
 */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #131315;
  --rail: #0e0e10;
  --card: #1b1b1e;
  --chip: #27272b;
  --chip-2: #323237;
  --pop: #232327;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.14);

  /* Text */
  --ink: #f2f2f0;
  --ink-2: #b6b6bb;
  --ink-3: #8e8e94;
  --ink-4: #5e5e64;

  /* Brand and states */
  --accent: #9896f9;
  --primary: #4a35f0;
  --primary-2: #5d4af6;
  --lilac: #cbcaf4;
  --teal: #35b5ae;
  --teal-ink: #93e4de;
  --good: #34d27b;
  --good-2: #25935b;
  --warn: #f2b84b;
  --serious: #f08a4b;
  --bad: #f06a6a;
  --star: #f2b84b;

  /* Attribute tiers */
  --t1: #8e8e94;
  --t2: #ececea;
  --t3: #ebd35f;
  --t4: #4ade80;

  /* Gradients */
  --hero: linear-gradient(118deg, #2b2680 0%, #25215f 42%, #1d1c36 80%, #1b1b1e 100%);
  --primary-gradient: linear-gradient(180deg, #5d4af6, #4a35f0);
  --primary-gradient-hover: linear-gradient(180deg, #6b59f8, #5340f3);

  /* Type */
  --font: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --text: 14px;
  --leading: 1.4;

  /* Radii */
  --r-card: 18px;
  --r-pop: 14px;
  --r-control: 11px;
  --r-item: 10px;
  --r-chip: 7px;
  --r-badge: 6px;

  /* Layout */
  --side: 64px;
  --pad: 20px;
  --top-h: 108px;
  --control-h: 36px;

  /* Shadows */
  --shadow-pop: 0 18px 44px rgba(0, 0, 0, 0.55);
}

@media (max-width: 719px) {
  :root {
    --r-card: 16px;
    --pad: 16px;
    --top-h: 102px;
  }
}