/* bohcay theme.css — Design Tokens (Dark default, optional light) */
:root {
  /* Colors */
  --color-bg: #0f172a;            /* slate-900 */
  --color-surface: #111827;       /* gray-900 */
  --color-surface-muted: #1f2937; /* gray-800 */
  --color-border: #374151;        /* gray-700 */
  --color-text: #e5e7eb;          /* gray-200 */
  --color-text-muted: #9ca3af;    /* gray-400 */
  --color-primary: #3b82f6;       /* blue-500 */
  --color-primary-600: #2563eb;   /* blue-600 */
  --color-primary-700: #1d4ed8;   /* blue-700 */
  --color-link: #ffffff;          /* pure white for dark bg */
  --color-link-hover: #e2e8f0;    /* slate-200 */
  --color-link-visited: #cbd5f5;  /* indigo-100 */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #38bdf8;
  --color-focus: #93c5fd;         /* focus ring */

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.25);
  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 24px -8px rgba(0,0,0,0.45);

  /* Spacing */
  --spacing-grid: 8px;        /* 8px rhythm */
  --spacing-section-y: 64px;  /* section vertical space */
  --spacing-container-x: 24px;
  --spacing-card-p: 20px;
  --spacing-gap: 16px;
}

/**************************************
 Optional light theme
**************************************/
[data-theme="light"] {
  --color-bg: #f8fafc;            /* slate-50 */
  --color-surface: #ffffff;       /* white */
  --color-surface-muted: #f1f5f9; /* slate-100 */
  --color-border: #e5e7eb;        /* gray-200 */
  --color-text: #0f172a;          /* slate-900 */
  --color-text-muted: #475569;    /* slate-600 */
  --color-primary: #2563eb;       /* blue-600 */
  --color-primary-600: #1d4ed8;
  --color-primary-700: #1e40af;
  --color-link: #1f2933;          /* slate-800 */
  --color-link-hover: #111827;    /* slate-900 */
  --color-link-visited: #4338ca;  /* indigo-700 */
  --color-focus: #2563eb;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --shadow-lg: 0 16px 32px rgba(15,23,42,.12);
}

/**************************************
 Base resets against tokens
**************************************/
html, body { background: var(--color-bg); color: var(--color-text); }