:root,
[data-theme='dark'] {
  color-scheme: dark;
  --base-bg: #202020;
  --base-surface-1: #191919;
  --base-surface-2: #282828;
  --base-surface-3: #303030;
  --base-surface-4: #383838;
  --base-sidebar-tile: #303030;
  --base-sidebar-selected: #242424;
  --base-sidebar-hover: #202020;
  --bg: var(--base-bg);
  --surface-1: var(--base-surface-1);
  --surface-2: var(--base-surface-2);
  --surface-3: var(--base-surface-3);
  --surface-4: var(--base-surface-4);
  --overlay: rgba(0, 0, 0, 0.55);
  --hairline: rgba(255, 255, 255, 0.065);
  --hairline-strong: rgba(255, 255, 255, 0.13);
  --text-1: #ededea;
  --text-2: #b4b4af;
  --text-3: #92928d;
  --text-4: #757570;
  --brand: #e8e8e3;
  --brand-hi: #ffffff;
  --brand-lo: #d1d1cb;
  --brand-ink: #202020;
  --brand-soft: rgba(255, 255, 255, 0.07);
  --verified: #919bd0;
  --love: #d5a5a5;
  --danger: #eb9898;
  --success: #94b89d;
  --warning: #d7b482;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-2: 0 12px 48px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--hairline-strong);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px #9f9bb8;
  --sidebar-text: #dadada;
  --sidebar-muted: #858585;
  --sidebar-tile: var(--base-sidebar-tile);
  --sidebar-selected: var(--base-sidebar-selected);
  --sidebar-hover: var(--base-sidebar-hover);
  --sidebar-active-tile: #626262;
  --sidebar-active-icon: #ffffff;
}

:root[data-theme='light'] {
  color-scheme: light;
  --base-bg: #fcfcfa;
  --base-surface-1: #f1f1ee;
  --base-surface-2: #eaeae6;
  --base-surface-3: #e3e3df;
  --base-surface-4: #dcdcd7;
  --base-sidebar-tile: #e1e1de;
  --base-sidebar-selected: #e3e3e0;
  --base-sidebar-hover: #eaeae7;
  --overlay: rgba(35, 35, 30, 0.28);
  --hairline: rgba(25, 25, 20, 0.075);
  --hairline-strong: rgba(25, 25, 20, 0.14);
  --text-1: #252521;
  --text-2: #5b5b55;
  --text-3: #72726b;
  --text-4: #8b8b83;
  --brand: #292925;
  --brand-hi: #42423c;
  --brand-lo: #151512;
  --brand-ink: #fcfcfa;
  --brand-soft: rgba(25, 25, 20, 0.055);
  --verified: #666f9e;
  --love: #a45c66;
  --danger: #b44040;
  --success: #52775c;
  --warning: #926b30;
  --shadow-1: 0 2px 8px rgba(25, 25, 20, 0.045);
  --shadow-2: 0 12px 48px rgba(25, 25, 20, 0.12), 0 0 0 1px var(--hairline);
  --sidebar-text: #333333;
  --sidebar-muted: #808080;
  --sidebar-active-tile: #888885;
  --sidebar-active-icon: #ffffff;
}

:root {
  --verified-badge: #1d9bf0;
  --premium-badge: linear-gradient(135deg, #ff86cb, #86cfff);
  --premium-fill: conic-gradient(
    from 225deg,
    #ff86cb,
    #ffb3de,
    #86cfff,
    #b9e3ff,
    #ff9fd4,
    #a6dcff,
    #ff86cb
  );
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-pill: 999px;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-display: 28px;
  --fs-h1: 28px;
  --fs-h2: 19px;
  --fs-h3: 15px;
  --fs-body: 13px;
  --fs-small: 12px;
  --fs-micro: 10px;
  --titlebar-h: 48px;
  --sidebar-full: 248px;
  --sidebar-w: var(--sidebar-full);
  --sidebar-gap: 0px;
  --tile: 34px;
  --content-pad: clamp(28px, 4vw, 64px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --spring: linear(
    0,
    0.0053 1.25%,
    0.0131 2%,
    0.024 2.75%,
    0.0536 4.25%,
    0.0985 6%,
    0.1436 7.5%,
    0.2014 9.25%,
    0.432 15.75%,
    0.533 18.75%,
    0.5878 20.5%,
    0.632 22%,
    0.6801 23.75%,
    0.7181 25.25%,
    0.7856 28.25%,
    0.8151 29.75%,
    0.846 31.5%,
    0.8943 34.75%,
    0.9317 38%,
    0.9636 41.75%,
    0.9868 45.75%,
    1.0027 50.25%,
    1.0117 55.25%,
    1.0146 59.75%,
    1.0144 65%,
    1
  );
  --spring-soft: linear(
    0,
    0.0044 1.25%,
    0.0196 2.75%,
    0.0482 4.5%,
    0.0856 6.25%,
    0.1226 7.75%,
    0.1697 9.5%,
    0.372 16.5%,
    0.4682 20%,
    0.5618 23.75%,
    0.6387 27.25%,
    0.7052 30.75%,
    0.7616 34.25%,
    0.8089 37.75%,
    0.8506 41.5%,
    0.89 46%,
    0.9228 51%,
    0.9486 56.5%,
    0.9677 62.5%,
    0.9813 69.25%,
    0.9904 77%,
    0.9958 85.75%,
    1
  );
  --spring-bounce: linear(
    0,
    0.0069 1%,
    0.0331 2.25%,
    0.0761 3.5%,
    0.1455 5%,
    0.2914 7.5%,
    0.3729 8.75%,
    0.6246 12.5%,
    0.7511 14.5%,
    0.8652 16.5%,
    0.9635 18.5%,
    1.0443 20.5%,
    1.1068 22.5%,
    1.1514 24.5%,
    1.1795 26.5%,
    1.1947 29.5%,
    1.1828 32.75%,
    1.1516 36%,
    1.0561 43.5%,
    1.0152 47.25%,
    0.9842 51.25%,
    0.9665 55.5%,
    0.9621 58.75%,
    0.9645 62.5%,
    0.9958 76.25%,
    1.0067 92.75%,
    1
  );
  --ease-spring: var(--spring);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;
  --dur-exit: 140ms;
  --dur-spring: 400ms;
  --dur-travel: 430ms;
  --card-min: 200px;
  --card-ratio: 1;
  --card-radius: 8px;
}