:root[data-brand="default"][data-theme="light"] {
  /* Tailwind custom properties for light mode */
  --background: 0 0% 98%;
  --foreground: 222 47% 11%;

  /* Brand primaries (teal) - darker for better contrast */
  --primary: 173 77% 26%;
  --primary-dark: 173 77% 20%;
  --primary-light: 167 73% 64%;
  --primary-foreground: 0 0% 100%;
  --primary-hover: 173 77% 30%;

  /* Neutrals */
  --neutral-500: 220 9% 46%;
  --neutral-700: 222 27% 20%;
  --neutral-400: 217 12% 65%;

  /* Component tokens - Light Mode */
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --card-hover: 0 0% 96%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;

  --secondary: 0 0% 96%;
  --secondary-foreground: 222 47% 11%;

  --muted: 0 0% 96%;
  --muted-foreground: 220 9% 46%;

  --accent: 45 96% 91%;
  --accent-foreground: 222 47% 11%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --success: 158 64% 41%;
  --success-foreground: 0 0% 100%;

  --warning: 24 70% 53%;
  --warning-foreground: 0 0% 100%;

  --border: 220 13% 85%;
  --input: 0 0% 98%;
  --ring: 173 77% 26%;
  
  /* Border widths */
  --border-width: 1px;
  --border-width-strong: 1.5px;
  --border-width-subtle: 0.5px;

  /* Glass/Modal backgrounds */
  --glass-modal: rgba(255, 255, 255, 0.95);
  --popover-bg: hsl(var(--popover));

  /* Badge variants */
  --badge-success-bg: hsl(var(--success) / 0.15);
  --badge-success-text: hsl(var(--success));
  --badge-success-ring: hsl(var(--success) / 0.25);

  /* Legacy token names for backwards compatibility */
  --bg-surface: #ffffff;
  --bg-base: #f9fafb;
  --bg-subtle: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --brand-fg: #0f766e;
  --accent-fg: #14b8a6;
  --border-subtle: #e5e7eb;
  --border-strong: #d1d5db;
  --text-on-brand: #ffffff;
  --focus-ring-size: 3px;
  --border-width: 1px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
  --shadow-neon: 0 0 20px hsl(173 80% 40% / 0.35);
  --shadow-glow: 0 0 40px hsl(24 70% 53% / 0.25);
  --shadow-card: 0 4px 16px hsl(0 0% 0% / 0.12), 0 2px 4px hsl(0 0% 0% / 0.08);
  --shadow-elevated: 0 8px 16px hsl(0 0% 0% / 0.12);
  --shadow-subtle: 0 1px 2px hsl(0 0% 0% / 0.05);

  /* Radii */
  --radius: 0.5rem;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-input: 12px;
  --radius-button: 10px;
  --radius-card: 16px;

  /* Spacing */
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;

  /* Focus ring */
  --focus-ring: #14b8a6;

  /* Glass morphism */
  --glass-bg: hsl(0 0% 100% / 0.8);
  --glassmorphism-bg: hsl(0 0% 100% / 0.95);
  --glass-border: hsl(173 80% 40% / 0.2);

  /* Gradients */
  --gradient-cyber: linear-gradient(135deg, hsl(173 77% 26%), hsl(173 80% 40%));
  --gradient-neon: linear-gradient(90deg, hsl(167 73% 64%), hsl(173 80% 40%));
  --gradient-hero: linear-gradient(180deg, hsl(0 0% 98%), hsl(173 80% 40% / 0.1));
  --gradient-card: linear-gradient(135deg, hsl(0 0% 100%), hsl(0 0% 98%));

  /* Sidebar tokens - Light Mode */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 222 27% 20%;
  --sidebar-primary: 173 80% 40%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 96%;
  --sidebar-accent-foreground: 222 27% 20%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 173 80% 40%;

  /* Back-compat tokens */
  --ms-blue: 173 80% 40%;
  --ms-neutral-10: 0 0% 96%;
  --ms-neutral-20: 0 0% 90%;
  --ms-neutral-30: 0 0% 82%;
  --ms-neutral-60: 220 9% 46%;
  --ms-neutral-90: 222 47% 11%;

  /* Legacy cyber tokens */
  --cyber-primary: 173 80% 40%;
  --cyber-secondary: 167 73% 64%;
  --cyber-accent: 24 70% 53%;
  --cyber-green: 158 64% 41%;
  --cyber-yellow: 38 92% 50%;

  /* Accent colors */
  --accent-copper: 24 70% 53%;
  --cream: 45 96% 91%;
  --cream-light: 48 100% 95%;
  --cream-dark: 28 96% 83%;

  /* Alert/Message backgrounds */
  --warning-bg: hsl(var(--warning) / 0.1);
  --warning-border: hsl(var(--warning) / 0.3);
  --warning-text: hsl(var(--warning-foreground));

  --info-bg: hsl(var(--primary) / 0.1);
  --info-border: hsl(var(--primary) / 0.3);
  --info-text: hsl(var(--primary));

  --destructive-bg: hsl(var(--destructive) / 0.1);
  --destructive-border: hsl(var(--destructive) / 0.3);
  --destructive-text: hsl(var(--destructive));
}