:root {
  /* ========================================
     MANOTAN BRAND PALETTE
     ======================================== */
  
  /* Core Brand Colors */
  --mano-charcoal: #2F4F4F;
  --mano-orange: #FF6B35;
  --mano-dark: #1A1A1A;
  --mano-light-gray: #F5F5F5;
  --mano-white: #FFFFFF;
  
  /* Charcoal Palette */
  --mano-charcoal-50: #E8EDED;
  --mano-charcoal-100: #D1DBDB;
  --mano-charcoal-200: #A3B7B7;
  --mano-charcoal-300: #759393;
  --mano-charcoal-400: #476F6F;
  --mano-charcoal-500: #2F4F4F;
  --mano-charcoal-600: #264040;
  --mano-charcoal-700: #1C3030;
  --mano-charcoal-800: #132020;
  --mano-charcoal-900: #0A1010;
  
  /* Orange Palette */
  --mano-orange-50: #FFF4F0;
  --mano-orange-100: #FFE4DB;
  --mano-orange-200: #FFC9B7;
  --mano-orange-300: #FFAE93;
  --mano-orange-400: #FF8A5B;
  --mano-orange-500: #FF6B35;
  --mano-orange-600: #E5522C;
  --mano-orange-700: #CC4423;
  --mano-orange-800: #B3361A;
  --mano-orange-900: #992811;
  
  /* Neutral Gray Palette */
  --mano-gray-50: #FAFAFA;
  --mano-gray-100: #F5F5F5;
  --mano-gray-200: #EEEEEE;
  --mano-gray-300: #E0E0E0;
  --mano-gray-400: #BDBDBD;
  --mano-gray-500: #9E9E9E;
  --mano-gray-600: #757575;
  --mano-gray-700: #616161;
  --mano-gray-800: #424242;
  --mano-gray-900: #212121;
  --mano-gray-950: #1A1A1A;
  
  /* Semantic Aliases */
  --mano-primary: var(--mano-charcoal);
  --mano-primary-light: var(--mano-charcoal-400);
  --mano-primary-dark: var(--mano-charcoal-700);
  --mano-accent: var(--mano-orange);
  --mano-accent-light: var(--mano-orange-400);
  --mano-accent-dark: var(--mano-orange-600);
  --mano-accent-glow: rgba(255, 107, 53, 0.3);
  --mano-accent-subtle: var(--mano-orange-50);
  
  /* Background Colors */
  --mano-bg-primary: var(--mano-light-gray);
  --mano-bg-secondary: var(--mano-white);
  --mano-bg-tertiary: var(--mano-gray-200);
  --mano-bg-dark: var(--mano-dark);
  
  /* Text Colors */
  --mano-text-primary: #1A1A1A;
  --mano-text-secondary: #666666;
  --mano-text-tertiary: #9E9E9E;
  --mano-text-inverse: #FFFFFF;
  --mano-text-accent: var(--mano-orange);
  
  /* Border Colors */
  --mano-border: rgba(0, 0, 0, 0.1);
  --mano-border-light: rgba(0, 0, 0, 0.05);
  --mano-border-strong: rgba(0, 0, 0, 0.2);
  --mano-border-accent: rgba(255, 107, 53, 0.5);
  
  /* Surface Colors */
  --mano-surface: var(--mano-white);
  --mano-surface-elevated: var(--mano-white);
  --mano-surface-muted: var(--mano-gray-100);
  
  /* Semantic Colors */
  --mano-success: #22C55E;
  --mano-success-light: #DCFCE7;
  --mano-success-dark: #16A34A;
  --mano-warning: #F59E0B;
  --mano-warning-light: #FEF3C7;
  --mano-warning-dark: #D97706;
  --mano-error: #EF4444;
  --mano-error-light: #FEE2E2;
  --mano-error-dark: #DC2626;
  --mano-info: #3B82F6;
  --mano-info-light: #DBEAFE;
  --mano-info-dark: #2563EB;
  
  /* Shadows */
  --mano-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --mano-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --mano-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --mano-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --mano-shadow-glow: 0 0 20px var(--mano-accent-glow);
  --mano-shadow-accent: 0 4px 14px rgba(255, 107, 53, 0.25);
  
  /* Border Radius */
  --mano-radius-sm: 0.25rem;
  --mano-radius-md: 0.375rem;
  --mano-radius-lg: 0.5rem;
  --mano-radius-xl: 0.75rem;
  --mano-radius-2xl: 1rem;
  --mano-radius-full: 9999px;
  
  /* Transitions */
  --mano-transition-fast: 150ms ease;
  --mano-transition-base: 200ms ease;
  --mano-transition-slow: 300ms ease;
  
  /* Typography */
  --mano-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mano-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  
  /* Legacy aliases (for gradual migration) */
  --background: var(--mano-bg-primary);
  --foreground: var(--mano-text-primary);
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  color: var(--mano-text-primary);
  background: var(--mano-bg-primary);
  font-family: var(--mano-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}