/* 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;
  --bg-rgb: 247 247 249;
  --surface: #ffffff;
  --surface-rgb: 255 255 255;
  --ink: #111;
  --ink-rgb: 17 17 17;
  --subtle: #9ca3af; /* gray-400 for placeholders */
  --subtle-rgb: 156 163 175;
  --border: #e5e7eb; /* gray-200 */
  --border-rgb: 229 231 235;
  --muted: #fafafa;
  --muted-rgb: 250 250 250;
  --accent: #ffd12a;
  --accent-rgb: 255 209 42;
  --accent-ink: #111;
  --accent-ink-rgb: 17 17 17;

  /* Brand colors (aligned with iOS BRAND_BLACK / BRAND_YELLOW) */
  --abz-black: #111111;
  --abz-white: #fff;
  --abz-yellow: #ffd12a;
  /* Account screen handoff — alias semantic app tokens where possible */
  --abz-bg: var(--muted);
  --abz-border: var(--border);
  --abz-border-strong: #d4d4d8;
  --abz-fg: var(--ink);
  --abz-fg-2: #3f3f46;
  --abz-fg-3: #71717a;
  --abz-fg-4: #9ca3af;
  --abz-link: #1d7afc;
  --abz-feature: #7c3aed;
  --abz-success: #2f9e5c;
  --abz-warning: #e0a800;
  --abz-danger: #dc2626;
  --abz-yellow-soft: #fff7d6;
  --abz-yellow-deep: #e0a800;
  --semantic-error: #e11d48;
  --semantic-success: #10b981;
  --semantic-warning: #f59e0b;
  --post-item: #3b82f6;
  --post-service: #10b981;
  --post-event: #8b5cf6;
  --post-job: #f59e0b;
  --post-housing: #8e44ad;

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

  /* Spacing & Layout */
  --radius: 16px;
  --shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  --maxw: 1100px;
  /* Mobile shell: bottom tab bar + listing detail action bar (keep in sync with components) */
  --mobile-bottom-nav-height: 3.5rem;
  --listing-detail-mobile-bar-height: 3.75rem;

  /* 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;
  --bg-rgb: 11 11 11;
  --surface: #121212;
  --surface-rgb: 18 18 18;
  --ink: #f2f2f2;
  --ink-rgb: 242 242 242;
  --subtle: #b5beca; /* Increased contrast for secondary text */
  --subtle-rgb: 181 190 202;
  --border: #222;
  --border-rgb: 34 34 34;
  --muted: #181818;
  --muted-rgb: 24 24 24;
  --accent: #ffd12a;
  --accent-rgb: 255 209 42;
  --accent-ink: #111;
  --accent-ink-rgb: 17 17 17;

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

  --abz-bg: var(--muted);
  --abz-border: var(--border);
  --abz-border-strong: #52525b;
  --abz-fg: var(--ink);
  --abz-fg-2: #d4d4d8;
  --abz-fg-3: #a1a1aa;
  --abz-fg-4: #71717a;
  --abz-link: #60a5fa;
  --abz-feature: #a78bfa;
  --abz-success: #4ade80;
  --abz-warning: #facc15;
  --abz-danger: #f87171;
  --abz-yellow-soft: #422006;
  --abz-yellow-deep: #fbbf24;

  --search-bg: #111;
  --search-bg-rgb: 17 17 17;
  --search-ink: #fff;
  --search-ink-rgb: 255 255 255;
  --search-border: #2a2a2a;
  --search-border-rgb: 42 42 42;

  --focus: #ffd12a; /* 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;
    --bg-rgb: 11 11 11;
    --surface: #121212;
    --surface-rgb: 18 18 18;
    --ink: #f2f2f2;
    --ink-rgb: 242 242 242;
    --subtle: #b5beca; /* Increased contrast for secondary text */
    --subtle-rgb: 181 190 202;
    --border: #222;
    --border-rgb: 34 34 34;
    --muted: #181818;
    --muted-rgb: 24 24 24;
    --accent: #ffd12a;
    --accent-rgb: 255 209 42;
    --accent-ink: #111;
    --accent-ink-rgb: 17 17 17;

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

    --abz-bg: var(--muted);
    --abz-border: var(--border);
    --abz-border-strong: #52525b;
    --abz-fg: var(--ink);
    --abz-fg-2: #d4d4d8;
    --abz-fg-3: #a1a1aa;
    --abz-fg-4: #71717a;
    --abz-link: #60a5fa;
    --abz-feature: #a78bfa;
    --abz-success: #4ade80;
    --abz-warning: #facc15;
    --abz-danger: #f87171;
    --abz-yellow-soft: #422006;
    --abz-yellow-deep: #fbbf24;

    --search-bg: #111;
    --search-bg-rgb: 17 17 17;
    --search-ink: #fff;
    --search-ink-rgb: 255 255 255;
    --search-border: #2a2a2a;
    --search-border-rgb: 42 42 42;

    --focus: #ffd12a;
  }
}