/* StoryVault Brand Overrides — loaded outside Starlight @layer
 * This file MUST be loaded via <link> in head, not via customCss,
 * because Starlight wraps customCss in @layer which loses specificity
 * against Starlight's own @layer starlight.base defaults.
 */

/* ── Dark Mode (default in Starlight) ───────────────── */
:root {
  --sl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Accent (Brand Cyan) */
  --sl-color-accent-low: #002b3d;
  --sl-color-accent: #00c8fa;
  --sl-color-accent-high: #b3efff;

  /* Warm neutral grays (matching StoryVault dark theme) */
  --sl-color-white: #e8e8e4;
  --sl-color-gray-1: #908f8b;
  --sl-color-gray-2: #6b6b67;
  --sl-color-gray-3: #4a4a47;
  --sl-color-gray-4: #3a3a37;
  --sl-color-gray-5: #30302e;
  --sl-color-gray-6: #262624;
  --sl-color-black: #1c1c1a;

  --sl-color-text: #e8e8e4;
  --sl-color-text-accent: #00c8fa;

  --sl-sidebar-width: 18rem;
}

/* ── Light Mode ─────────────────────────────────────── */
:root[data-theme="light"] {
  --sl-color-accent-low: #e0f7fe;
  --sl-color-accent: #0099cc;
  --sl-color-accent-high: #004d66;

  --sl-color-white: #f8f9fc;
  --sl-color-gray-1: #e5e5e5;
  --sl-color-gray-2: #c0c0be;
  --sl-color-gray-3: #908f8b;
  --sl-color-gray-4: #737373;
  --sl-color-gray-5: #585856;
  --sl-color-gray-6: #3a3a37;
  --sl-color-black: #0a0a0a;

  --sl-color-text: #0a0a0a;
  --sl-color-text-accent: #0099cc;
}