:root {
  color-scheme: light;

  /* Typography */
  --app-font-sans: "Google Sans Flex", "Google Sans", "Google Sans Text", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --app-text-display: clamp(2rem, 5vw, 3.5rem);
  --app-text-h1: clamp(1.75rem, 3vw, 2.35rem);
  --app-text-h2: 1.25rem;
  --app-text-h3: 1rem;
  --app-text-body: 1rem;
  --app-text-small: 0.875rem;
  --app-text-label: 0.8125rem;
  --app-text-overline: 0.72rem;

  /* Brand and semantic colors */
  --app-ink: #17212b;
  --app-ink-soft: #344454;
  --app-muted: #667789;
  --app-surface: #ffffff;
  --app-surface-muted: #f4f7fa;
  --app-surface-strong: #e8eef4;
  --app-border: #d8e1e9;
  --app-border-strong: #b8c6d2;
  --app-primary: #2563eb;
  --app-primary-hover: #1d4ed8;
  --app-primary-soft: #dbeafe;
  --app-primary-contrast: #ffffff;
  --app-success: #12815e;
  --app-success-soft: #dff7ed;
  --app-warning: #b77900;
  --app-warning-soft: #fff2cc;
  --app-danger: #c73d3d;
  --app-danger-soft: #fee7e7;
  --app-info: #2b6cb0;
  --app-info-soft: #e0f0ff;
  --app-sidebar: #18212b;
  --app-sidebar-end: #101820;
  --app-sidebar-bg: var(--app-sidebar);
  --app-sidebar-bg-end: var(--app-sidebar-end);
  --app-sidebar-active: var(--app-primary);
  --app-sidebar-text: #eff5f8;
  --app-sidebar-muted: #b4c1ca;
  --app-text: var(--app-ink);
  --app-text-muted: var(--app-muted);
  --app-overlay: rgba(10, 17, 24, 0.58);

  /* Spacing */
  --app-space-1: 0.25rem;
  --app-space-2: 0.5rem;
  --app-space-3: 0.75rem;
  --app-space-4: 1rem;
  --app-space-5: 1.25rem;
  --app-space-6: 1.5rem;
  --app-space-8: 2rem;
  --app-space-10: 2.5rem;
  --app-space-12: 3rem;

  /* Shape and elevation */
  --app-radius-xs: 0.5rem;
  --app-radius-sm: 0.625rem;
  --app-radius-md: 0.875rem;
  --app-radius-lg: 1.125rem;
  --app-radius-pill: 999px;
  --app-shadow-sm: 0 8px 22px rgba(23, 33, 43, 0.06);
  --app-shadow-md: 0 20px 45px rgba(23, 33, 43, 0.12);
  --app-shadow-focus: 0 0 0 0.22rem rgba(37, 99, 235, 0.2);

  /* Layout */
  --app-sidebar-width: 17.5rem;
  --app-topbar-height: 4.5rem;
  --app-control-height: 2.75rem;
  --app-content-readable: 70ch;
  --app-content-max: 100rem;

  /* Motion and layers */
  --app-duration-fast: 120ms;
  --app-duration-normal: 220ms;
  --app-duration-slow: 360ms;
  --app-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --app-z-dropdown: 1050;
  --app-z-modal: 1060;
  --app-z-toast: 1080;
  --app-z-loader: 2000;

  /* Bootstrap bridge */
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 37, 99, 235;
  --bs-body-font-family: var(--app-font-sans);
  --bs-body-color: var(--app-ink);
  --bs-body-bg: var(--app-surface-muted);
  --bs-secondary-color: var(--app-muted);
  --bs-secondary-color-rgb: 102, 119, 137;
}

[data-theme="dark"] {
  color-scheme: dark;
  --app-ink: #f0f5f8;
  --app-ink-soft: #d3dee6;
  --app-muted: #aab9c5;
  --app-surface: #1b2732;
  --app-surface-muted: #111a22;
  --app-surface-strong: #263542;
  --app-border: #344654;
  --app-border-strong: #506777;
  --app-primary: #60a5fa;
  --app-primary-hover: #93c5fd;
  --app-primary-soft: #1e3a5f;
  --app-primary-contrast: #0b1220;
  --app-success: #5fd3a9;
  --app-success-soft: #173d33;
  --app-warning: #f6c85f;
  --app-warning-soft: #493814;
  --app-danger: #ff8a8a;
  --app-danger-soft: #4d2528;
  --app-info: #78b7ef;
  --app-info-soft: #193753;
  --app-sidebar: #0c1319;
  --app-sidebar-end: #070c11;
  --app-sidebar-text: #f0f5f8;
  --app-sidebar-muted: #aab9c5;
  --app-overlay: rgba(0, 0, 0, 0.72);
  --app-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.2);
  --app-shadow-md: 0 20px 45px rgba(0, 0, 0, 0.32);
  --app-shadow-focus: 0 0 0 0.22rem rgba(96, 165, 250, 0.28);
  --bs-primary-rgb: 96, 165, 250;
  --bs-body-color: var(--app-ink);
  --bs-body-bg: var(--app-surface-muted);
  --bs-secondary-color: var(--app-muted);
  --bs-secondary-color-rgb: 170, 185, 197;
}