/* ========================================
   Bitmark Parser Documentation - Main Styles
   ======================================== */

/* @zen-impl: NAV-6_AC-3 */
/* @zen-impl: NAV-6_AC-5 */

/* Self-hosted fonts (PLAN-274 D3): Roboto and Roboto Mono, Latin and
   Latin-extended subsets — every site language is Latin script. No request
   leaves the site. Licences (OFL 1.1): ../fonts/LICENSE-*.txt */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/roboto-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-mono-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-mono-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* CSS Custom Properties (Design Tokens)
   ---------------------------------------- */
:root {
  /* Colors — the look of docs.bitmark.cloud (PLAN-274): brand indigo
     #27187E on the header bar, footer and headings; a brighter indigo for
     links and current items; neutral greys. Every text/background pair is
     checked ≥ WCAG AA by tests/docs/contrast.spec.js. */
  --color-primary: #27187e;
  --color-primary-dark: #1c105e;
  --color-primary-light: #4a3aad;
  --color-on-primary: #ffffff;

  --color-heading: #27187e;
  --color-title: #757575;
  --color-link: #4051b5;
  --color-link-hover: #303fa1;

  /* Header bar: indigo in both themes, white text (D2, D4). The footer is
     near-black in both themes, as the reference's is. */
  --color-header-bg: #27187e;
  --color-footer-bg: #212121;
  --color-on-header: #ffffff;
  --color-on-header-muted: rgb(255 255 255 / 0.75);
  --color-header-search-bg: rgb(0 0 0 / 0.26);
  --color-header-search-bg-hover: rgb(0 0 0 / 0.34);

  --color-text: #212121;
  --color-text-muted: #616161;
  --color-text-light: #9e9e9e;

  --color-bg: #ffffff;
  --color-bg-subtle: #fafafa;
  --color-bg-muted: #f5f5f5;

  --color-border: #e0e0e0;
  --color-border-dark: #bdbdbd;

  /* Callouts (admonitions, D7b): border/icon colour and title-bar tint. */
  --color-note: #448aff;
  --color-note-bg: rgb(68 138 255 / 0.1);
  --color-tip: #00bfa5;
  --color-tip-bg: rgb(0 191 165 / 0.1);
  --color-warning: #ff9100;
  --color-warning-bg: rgb(255 145 0 / 0.1);
  --color-error: #ef4444;

  /* JSON syntax highlighting (Try-it editor, PLAN-171) */
  --syntax-key: #27187e;
  --syntax-string: #15803d;
  --syntax-number: #b45309;
  --syntax-literal: #9333ea;

  /* Typography */
  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Roboto Mono', SFMono-Regular, Consolas, Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5625rem;
  --text-3xl: 2rem;
  --text-4xl: 2.25rem;
  --text-code: 0.85em;

  --line-height-tight: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout */
  --max-width-content: 1600px;
  --max-width-prose: 65ch;
  --header-height: 48px;
  --sidebar-width: 280px;

  /* Borders */
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.5rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-header: 0 0 0.2rem rgb(0 0 0 / 0.1), 0 0.2rem 0.4rem rgb(0 0 0 / 0.2);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
}

/* Dark mode support — three states (PLAN-159): the default "system" state
   follows prefers-color-scheme; an explicit choice stamps data-theme on
   <html> (set by the no-flash head script + theme.js) and wins. The token
   block is therefore defined twice: once for system-dark (guarded against a
   forced light theme) and once for forced dark. Keep both in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-primary: #a79bf5;
    --color-primary-dark: #b1a7f2;
    --color-primary-light: #8d7fe8;
    --color-on-primary: #1a1147;

    --color-heading: #a79bf5;
    --color-title: #94a3b8;
    --color-link: #8c9eff;
    --color-link-hover: #b3c0ff;

    --color-header-bg: #1c105e;
    --color-header-search-bg: rgb(255 255 255 / 0.1);
    --color-header-search-bg-hover: rgb(255 255 255 / 0.16);

    --color-text: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-text-light: #64748b;

    --color-bg: #0f172a;
    --color-bg-subtle: #1e293b;
    --color-bg-muted: #1e293b;

    --color-border: #334155;
    --color-border-dark: #475569;

    --color-note-bg: rgb(68 138 255 / 0.15);
    --color-tip-bg: rgb(0 191 165 / 0.15);
    --color-warning-bg: rgb(255 145 0 / 0.15);

    --syntax-key: #a79bf5;
    --syntax-string: #4ade80;
    --syntax-number: #fbbf24;
    --syntax-literal: #c084fc;
  }
}

:root[data-theme='dark'] {
  --color-primary: #a79bf5;
  --color-primary-dark: #b1a7f2;
  --color-primary-light: #8d7fe8;
  --color-on-primary: #1a1147;

  --color-heading: #a79bf5;
  --color-title: #94a3b8;
  --color-link: #8c9eff;
  --color-link-hover: #b3c0ff;

  --color-header-bg: #1c105e;
  --color-header-search-bg: rgb(255 255 255 / 0.1);
  --color-header-search-bg-hover: rgb(255 255 255 / 0.16);

  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-text-light: #64748b;

  --color-bg: #0f172a;
  --color-bg-subtle: #1e293b;
  --color-bg-muted: #1e293b;

  --color-border: #334155;
  --color-border-dark: #475569;

  --color-note-bg: rgb(68 138 255 / 0.15);
  --color-tip-bg: rgb(0 191 165 / 0.15);
  --color-warning-bg: rgb(255 145 0 / 0.15);

  --syntax-key: #a79bf5;
  --syntax-string: #4ade80;
  --syntax-number: #fbbf24;
  --syntax-literal: #c084fc;
}

/* Custom Scrollbars
   ---------------------------------------- */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-dark) transparent;
}

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-border-dark);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-muted);
}

::-webkit-scrollbar-corner {
  background: transparent;
}