@layer base {
  :root {
    /* Neumorphic color system */
    --color-bg: #d1b79e;
    --color-bg-light: #e0c7b0;
    --color-bg-dark: #c2a78c;
    --color-shadow-light: #f5dcc4;
    --color-shadow-dark: #ad9278;
    --color-icon: rgba(173, 146, 120, 0.7);
    --color-icon-pressed: rgba(158, 133, 109, 0.85);
    --button-size: 30vh;
    
    /* Legacy colors - kept for compatibility */
    --color-background: var(--color-bg);
    --color-surface: #1a1a1a;
    --color-surface-variant: #0a0a0a;
    
    --color-primary: #00ff88;
    --color-primary-variant: #00cc6a;
    --color-secondary: #0066ff;
    --color-accent: #ff6600;
    --color-danger: #ff4444;
    --color-warning: #ffaa00;
    
    --color-text-primary: var(--color-icon);
    --color-text-secondary: #cccccc;
    --color-text-tertiary: #888888; 
    --color-text-on-primary: #000000;
    
    /* Typography scale */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    
    /* Spacing scale */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 0.75rem;   /* 12px */
    --space-lg: 1rem;      /* 16px */
    --space-xl: 1.25rem;   /* 20px */
    --space-2xl: 1.5rem;   /* 24px */
    --space-3xl: 2rem;     /* 32px */
    --space-4xl: 3rem;     /* 48px */
    
    /* Radius scale */
    --radius-sm: 0.375rem;  /* 6px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    
    /* Interactive sizes - car-friendly */
    --touch-target-min: 44px;
    --button-height-sm: 48px;
    --button-height-md: 56px;
    --button-height-lg: 64px;
    
    /* Layout */
    --container-max-width: 500px;
    --content-padding: var(--space-xl);
    
    /* Transitions */
    --transition-fast: 150ms ease-out;
    --transition-base: 250ms ease-out;
    --transition-slow: 350ms ease-out;
  }

  /* Dark mode - System preference only */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: #383430;
      --color-bg-light: #45413d;
      --color-bg-dark: #2b2826;
      --color-shadow-light: #524f4c;
      --color-shadow-dark: #1c1b1a;
      --color-icon: rgba(158, 153, 148, 0.7);
      --color-icon-pressed: rgba(133, 130, 126, 0.85);
      
      --color-background: var(--color-bg);
      --color-text-primary: var(--color-icon);
    }
  }

  /* Visually hide elements but keep them accessible */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  /* Base styles */
  html {
    font-size: 16px;
    height: 100vh;
    overflow: hidden;
    
    @media (min-width: 375px) {
      font-size: 17px;
    }
    
    @media (min-width: 414px) {
      font-size: 18px;
    }
  }

  body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    touch-action: none;
    background: linear-gradient(145deg, var(--color-bg-light), var(--color-bg-dark));
    font-family: var(--font-family-base);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.3s ease-in-out;
    color: var(--color-text-primary);
    padding: var(--content-padding);
    /* Safe area support */
    padding-top: max(var(--content-padding), env(safe-area-inset-top));
    padding-right: max(var(--content-padding), env(safe-area-inset-right));
    padding-bottom: max(var(--content-padding), env(safe-area-inset-bottom));
    padding-left: max(var(--content-padding), env(safe-area-inset-left));
  }

  /* Typography */
  h1 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--space-3xl);
  }

  h2 {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
  }

  /* Utility classes */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}