:root {
  --bp-desktop: 980px;
  --berkeley-blue-120: #002676;
  --berkeley-blue: #002676;
  --berkeley-blue-100: #003262;
  --berkeley-blue-80: #004a9e;
  --berkeley-blue-60: #004aae;
  --berkeley-blue-20: rgba(0, 38, 118, 0.2);
  --berkeley-cream: #f3eacf;
  --berkeley-gold: #fdb515;
  --heritage-gold: #c09748;
  --gold-dark: #fc9313;
  --gold-medium: rgba(255, 195, 27, 0.5);
  --gray-light: #f2f2f2;

  --color-text-primary: #000000;
  --color-text-secondary: rgba(0, 38, 118, 0.7);
  --color-text-on-blue: #ffffff;
  --color-url-text: #5a6169;

  --color-surface-primary: #ffffff;
  --color-surface-secondary: #f0f0f0;
  --color-hover-bg: #e8e8e8;
  --color-active-bg: #d8d8d8;

  --color-border: #cccccc;
  --color-border-subtle: #e0e0e0;
  --color-focus-ring: #005fcc;

  --accent-color: var(--berkeley-gold);
  --border-color: rgba(0, 38, 118, 0.2);
  --hover-bg: rgba(0, 38, 118, 0.05);

  --burger-border-color: #f3eacf;
  --burger-line-color: #003262;

  --nav-width: 220px;
  --nav-left: 12px;
  --nav-gap: 16px;
  --content-right-gap: 24px;
  --content-max: 740px;
  --content-max-with-nav: 980px;
  --left-rail: calc(var(--nav-left) + var(--nav-width) + var(--nav-gap));

  --perm-col-2: auto;
  --perm-col-3: auto;
}

@media (max-width: 1200px) {
  :root { --nav-left: 17px; }
}

html {
  scrollbar-gutter: stable both-edges;
}

.tw-app,
.tw-app * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.tw-app {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: var(--berkeley-blue);
  background: #ffffff;
}

.tw-app.tw-privacy {
  --color-text-secondary: #656d76;
  --color-url-text: #5a6169;
  --color-surface-primary: #ffffff;
  --color-surface-secondary: #f0f0f0;
  --color-hover-bg: #e8e8e8;
  --color-active-bg: #d8d8d8;
  --color-border: #cccccc;
  --color-border-subtle: #e0e0e0;
  --color-focus-ring: #005fcc;
  --border-color: var(--color-border-subtle);
  --hover-bg: var(--color-hover-bg);
}

@media (prefers-color-scheme: dark) {
  .tw-app.tw-privacy {
    --berkeley-cream: #1a1a1a;
    --berkeley-blue-100: #4a90e2;
    --berkeley-blue-80: #5ba0f2;
    --berkeley-blue-60: #6bb0ff;
    --berkeley-gold: #f5c842;
    --color-text-primary: #e8e8e8;
    --color-url-text: #b8b8b8;
    --color-text-secondary: #b8b8b8;
    --color-surface-primary: #1a1a1a;
    --color-surface-secondary: #2d2d2d;
    --color-hover-bg: #353535;
    --color-active-bg: #404040;
    --color-border: #404040;
    --color-border-subtle: #333333;
  }
}