:root{
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --blur-sm: 10px;
  --blur-md: 18px;
  --blur-lg: 28px;
  --blur-xl: 38px;

  --shadow-soft: 0 16px 48px rgba(15, 23, 42, .08);
  --shadow-float: 0 24px 64px rgba(15, 23, 42, .12);

  --content-max: 1240px;
  --side-width: 320px;
  --header-height: 72px;

  --bg: #f5f5f7;
  --bg-elevated: rgba(255,255,255,.64);
  --bg-soft: rgba(255,255,255,.44);
  --bg-strong: rgba(255,255,255,.82);
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #8e8e93;
  --line: rgba(60,60,67,.12);
  --line-strong: rgba(60,60,67,.2);
  --brand: var(--brand-light, #0071e3);
  --brand-soft: rgba(0,113,227,.14);
  --success: #30d158;
  --danger: #ff453a;
}

html[data-theme="dark"]{
  --bg: #0b0b0f;
  --bg-elevated: rgba(28,28,30,.62);
  --bg-soft: rgba(44,44,46,.38);
  --bg-strong: rgba(28,28,30,.86);
  --text: #f5f5f7;
  --text-2: #c7c7cc;
  --text-3: #8e8e93;
  --line: rgba(255,255,255,.1);
  --line-strong: rgba(255,255,255,.18);
  --brand: var(--brand-dark, #2997ff);
  --brand-soft: rgba(41,151,255,.14);
  --shadow-soft: 0 16px 48px rgba(0,0,0,.26);
  --shadow-float: 0 24px 64px rgba(0,0,0,.34);
}