:root {
  color-scheme: light;

  /* DynamicOS brand palette */
  --color-primary-blue: #0078d4;
  --color-primary-blue-hover: #0067b8;
  --color-primary-blue-soft: #eaf5ff;
  --color-primary-green: #8fd43d;
  --color-primary-green-hover: #79bd2c;
  --color-primary-green-soft: #f3fbe8;
  --color-brand-cyan: #00b4e6;
  --color-navy: #0f172a;
  --color-navy-deep: #071c36;
  --color-bg: #f6f8fa;
  --color-surface: #ffffff;
  --color-surface-subtle: #f9fbfc;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-text: #172033;
  --color-text-muted: #64748b;
  --color-danger: #dc3f4d;

  /* Type */
  --font-family: "Cairo", "Inter", "Plus Jakarta Sans", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-brand: "Inter", "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --font-size-xs: 0.72rem;
  --font-size-sm: 0.82rem;
  --font-size-base: 0.94rem;
  --font-size-lg: 1.12rem;
  --font-size-xl: 1.55rem;

  /* Shape and depth */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 10px 32px rgba(15, 23, 42, 0.07);
  --shadow-focus: 0 0 0 4px rgba(0, 120, 212, 0.11);

  /* Motion */
  --transition-fast: 160ms ease;
  --transition-base: 220ms ease;
}