:root {

  --bg: #f3f3f5;
  --surface: #fcfcfd;
  --surface-sunken: #f3f3f5;
  --surface-muted: #e9e9ed;

  --ink: #111114;
  --ink-soft: #68686f;
  --ink-faint: #a5a5ac;

  --dark: #111114;
  --dark-raised: #232329;
  --dark-row: #2c2c33;
  --dark-chip: #383840;
  --on-dark: #fcfcfd;
  --on-dark-soft: #a9a9b1;
  --on-dark-faint: #8f8f98;
  --on-dark-muted: #b8b8c0;
  --glass: #ffffff16;
  --glass-soft: #ffffff12;

  --accent: #635bff;
  --accent-hover: #4f46df;
  --accent-hover: color-mix(in srgb, var(--accent) 78%, var(--dark));
  --accent-soft: #eae8ff;
  --accent-soft: color-mix(in srgb, var(--accent) 13%, var(--surface));
  --accent-gradient: #8f89ff;
  --accent-gradient: color-mix(in srgb, var(--accent) 72%, white);

  --green: #1b7a50;
  --green-soft: #e4f4eb;
  --mint: #77e2a8;
  --mint-ink: #a8f2c9;
  --mint-bg: #153d2a;

  --tile-ps: #dde7ff;
  --tile-ai: #ffe7d4;
  --tile-bl: #e1ecf1;
  --tile-dv: #e9e4f3;
  --tile-ph: #eae2f8;
  --tile-ll: #dceae5;
  --tile-ac: #f7e3e3;
  --tile-fi: #e8e3ff;
  --tile-no: #ececef;
  --tile-ra: #ffe0e4;
  --tile-rb: #f5e5d8;
  --tile-ps-ink: #2f5cd4;

  --corner: superellipse(2);

  --r-panel: 44px;
  --r-card: 36px;
  --r-lg: 30px;
  --r-md: 28px;
  --r-sm: 24px;
  --r-xs: 22px;
  --r-tile: 16px;
  --r-tile-sm: 14px;
  --r-pill: 999px;

  --shadow-nav: 0 1px 2px #1111140f, 0 8px 24px #11111414;
  --shadow-nav-lifted: 0 1px 2px #11111414, 0 14px 38px #1111141f;
  --shadow-search: 0 1px 2px #1111140f, 0 14px 30px #1111141f;
  --shadow-search-accent:
    0 1px 2px color-mix(in srgb, var(--accent) 8%, transparent),
    0 12px 26px color-mix(in srgb, var(--accent) 12%, transparent);
  --shadow-card: 0 1px 2px #1111140f, 0 12px 28px #11111414;
  --shadow-chip: 0 1px 2px #1111140d, 0 6px 16px #1111140f;
  --shadow-panel: 0 1px 2px #11111408, 0 14px 40px #11111408;
  --shadow-lift: 0 2px 4px #11111412, 0 14px 30px #11111418;

  --maxw: 1376px;
  --gutter: 32px;
  --stack-gap: 20px;
  --panel-pad: 52px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-wave: cubic-bezier(0.36, 0.66, 0.04, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur: 180ms;
  --dur-wave: 560ms;
  --dur-reveal: 720ms;

  --step: 70ms;

  --flight: 560ms;
  --ease-goo: cubic-bezier(0.62, 0, 0.28, 1);
}

@media (max-width: 1120px) {
  :root {
    --panel-pad: 40px;
    --r-panel: 40px;
  }
}

@media (max-width: 860px) {
  :root {
    --gutter: 20px;
    --panel-pad: 30px;
    --r-panel: 34px;
    --r-card: 30px;
    --r-lg: 26px;
    --r-md: 24px;
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 14px;
    --panel-pad: 22px;
    --r-panel: 28px;
    --r-card: 24px;
    --r-lg: 22px;
    --r-md: 20px;
    --r-sm: 20px;
  }
}