/* PALETTE OPTION 1: BLUEPRINT & AMBER */
:root {
  /* Light Theme */
  --color-bg: #ffffff;
  --color-bg-secondary: #f1f5f9; /* Slate 100 */
  --color-bg-tertiary: #e2e8f0; /* Slate 200 */
  --color-text: #0f172a;       /* Slate 900 */
  --color-text-secondary: #475569; /* Slate 600 */
  --color-border: #cbd5e1;     /* Slate 300 */

  --color-primary: #334155;      /* Slate 700 - A strong, serious primary */
  --color-primary-hover: #1e293b; /* Slate 800 */

  --color-accent: #b45309;       /* A sharp, focused amber for highlights */
  --color-accent-hover: #92400e;

  --color-warning: #d97706;
  --color-error: #be123c;      /* A deeper, more serious red */

  /* Card/Tag Category Colors */
  --color-hosted: #4f46e5;      /* Indigo */
  --color-hosted-bg: #eef2ff;
  --color-oss: #0d9488;         /* Teal */
  --color-oss-bg: #f0fdfa;
  --color-method: #0891b2;      /* Cyan */
  --color-method-bg: #ecfeff;
  --color-concept: #c2410c;     /* Orange */
  --color-concept-bg: #fff7ed;

  /* Shadows (Crisper) */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 6%);
  --shadow-md: 0 3px 5px -1px rgb(0 0 0 / 8%);
  --shadow-lg: 0 8px 12px -3px rgb(0 0 0 / 10%);

  /* Transitions */
  --transition-fast: all 0.2s ease;
  --transition-medium: all 0.3s ease;
}

[data-theme="dark"] {
  /* Dark Theme */
  --color-bg: #0f172a;         /* Slate 900 */
  --color-bg-secondary: #1e293b; /* Slate 800 */
  --color-bg-tertiary: #334155; /* Slate 700 */
  --color-text: #f1f5f9;       /* Slate 100 */
  --color-text-secondary: #94a3b8; /* Slate 400 */
  --color-border: #475569;     /* Slate 600 */

  --color-primary: #64748b;      /* Slate 500 */
  --color-primary-hover: #94a3b8; /* Slate 400 */

  --color-accent: #f59e0b;       /* A brighter amber for dark mode contrast */
  --color-accent-hover: #fbbf24;

  --color-warning: #f59e0b;
  --color-error: #f43f5e;

  /* Card/Tag Category Colors */
  --color-hosted: #818cf8;      /* Indigo */
  --color-hosted-bg: #3730a3;
  --color-oss: #2dd4bf;         /* Teal */
  --color-oss-bg: #115e59;
  --color-method: #22d3ee;      /* Cyan */
  --color-method-bg: #164e63;
  --color-concept: #fb923c;     /* Orange */
  --color-concept-bg: #7c2d12;

  /* Shadows (Subtler for dark mode) */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 20%);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 30%);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 40%);
}