/* abuzzlist Design Tokens - CSS Custom Properties */
/* Aligned with iOS palette: gray levels 25, 50, 100, 200, 300, 400, 600, 800 (no 500) */

:root {
  /* Colors - Light Mode (default) */
  /* Gray palette matching iOS (no gray-500) */
  --gray-25: #fcfcfd;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af; /* Placeholder text, hints (matches iOS gray[400]) */
  --gray-600: #4b5563;
  --gray-800: #1f2937;
  
  /* Semantic tokens (mapped to gray palette) */
  --bg: #f7f7f9;
  --surface: #ffffff;
  --ink: #111;
  --subtle: #9ca3af; /* gray-400 for placeholders */
  --border: #e5e7eb; /* gray-200 */
  --muted: #fafafa;
  --accent: #FFDC00;
  --accent-ink: #111;

  /* Brand colors (for specific use cases like topnav) */
  --abz-black: #000;
  --abz-white: #fff;
  --abz-yellow: #FFDC00;

  /* Search field tokens */
  --search-bg: #fff;
  --search-ink: #111;
  --search-border: #ccc;

  /* Spacing & Layout */
  --radius: 16px;
  --shadow: 0 10px 24px rgba(0, 0, 0, .06);
  --maxw: 1100px;

  /* Focus */
  --focus: #111; /* high-contrast focus (light) */
}

/* Dark Mode Override */
:root[data-theme="dark"] {
  /* Gray palette for dark mode */
  --gray-25: #1f2937;
  --gray-50: #111827;
  --gray-100: #1f2937;
  --gray-200: #374151;
  --gray-300: #4b5563;
  --gray-400: #9ca3af; /* Placeholder text, hints (same as light mode) */
  --gray-600: #d1d5db;
  --gray-800: #f3f4f6;
  
  /* Semantic tokens (dark mode) */
  --bg: #0b0b0b;
  --surface: #121212;
  --ink: #f2f2f2;
  --subtle: #9ca3af; /* gray-400 for placeholders */
  --border: #222;
  --muted: #181818;
  --accent: #FFDC00;
  --accent-ink: #111;

  /* Brand colors (same in dark mode) */
  --abz-black: #000;
  --abz-white: #fff;
  --abz-yellow: #FFDC00;

  --search-bg: #111;
  --search-ink: #fff;
  --search-border: #2a2a2a;

  --focus: #FFDC00; /* high-contrast focus (dark) */
}

/* Auto: Follow OS preference when not explicitly set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Gray palette for auto dark mode */
    --gray-25: #1f2937;
    --gray-50: #111827;
    --gray-100: #1f2937;
    --gray-200: #374151;
    --gray-300: #4b5563;
    --gray-400: #9ca3af; /* Placeholder text, hints */
    --gray-600: #d1d5db;
    --gray-800: #f3f4f6;
    
    /* Semantic tokens (auto dark mode) */
    --bg: #0b0b0b;
    --surface: #121212;
    --ink: #f2f2f2;
    --subtle: #9ca3af; /* gray-400 for placeholders */
    --border: #222;
    --muted: #181818;
    --accent: #FFDC00;
    --accent-ink: #111;

    /* Brand colors (same in auto dark mode) */
    --abz-black: #000;
    --abz-white: #fff;
    --abz-yellow: #FFDC00;

    --search-bg: #111;
    --search-ink: #fff;
    --search-border: #2a2a2a;

    --focus: #FFDC00;
  }
}