/*
 * bezel 0.1.4 palette as CSS custom properties. Source: bezel-theme
 * src/theme/palettes.rs, plus sirio_theme's three own tokens. Every value
 * carries its bezel constructor so a bezel bump in the app is carried over
 * here line by line. THIS IS THE ONLY FILE ALLOWED TO CONTAIN COLOUR
 * LITERALS (tests/html.test.ts enforces it).
 */
:root {
  color-scheme: dark;

  --bg: #060606;                          /* grey(6) */
  --surface: #0d0d0d;                     /* grey(13) */
  --surface-raised: oklch(0.235 0 0);     /* neutral(0.235) */
  --surface-card: #0e0e0e;                /* grey(0x0e) */
  --element-hover: rgb(235 235 235 / 0.11);   /* hsla(0,0,.92,.11) */
  --element-active: rgb(235 235 235 / 0.16);  /* hsla(0,0,.92,.16) */
  --border: rgb(255 255 255 / 0.08);      /* hsla(0,0,1,.08) */
  --border-strong: rgb(255 255 255 / 0.14); /* hsla(0,0,1,.14) */
  --text-full: oklch(0.922 0 0);          /* bezel text, neutral(0.922) */
  --text: color-mix(in oklab, var(--text-full) 90%, var(--surface)); /* sirio TEXT_SOFTENING 10% */
  --text-muted: oklch(0.708 0 0);         /* neutral(0.708) */
  --text-faint: oklch(0.556 0 0);         /* neutral(0.556) */
  --solid: oklch(0.922 0 0);              /* neutral(0.922) */
  --on-solid: #0e0e0e;                    /* grey(0x0e) */
  --accent: oklch(0.673 0 0);             /* neutral(0.673), no chroma (C1) */
  --danger: oklch(0.704 0.191 22.216);    /* red-400 */
  --warning: oklch(0.828 0.189 84.429);   /* amber-400 */
  --success: oklch(0.765 0.177 163.223);  /* emerald-400 */
  --success-muted: oklch(0.845 0.143 164.978); /* emerald-300 */
  --busy: oklch(0.718 0.202 349.761);     /* pink-400 */
  --ring: rgb(255 255 255 / 0.35);        /* hairline_for(Dark, 0.35) */
  --code-wash: rgb(255 255 255 / 0.08);   /* white/8 */
  --brand-coral: #E08B52;                 /* sirio_theme brand_coral, dark */
  --terminal-surface: var(--surface);     /* sirio_theme terminal_surface, dark = pane surface */
  --frame-surface: var(--surface);        /* translucent in the app; opaque on a page */

  --radius: 8px;                          /* BASE_RADIUS */
  --radius-chip: 4px;                     /* ×0.5 */
  --radius-control: 6px;                  /* ×0.75 */
  --radius-panel: 7px;                    /* ×0.875 */
  --radius-toast: 10px;                   /* ×1.25 */
  --radius-pill: 12px;                    /* ×1.5 */
  --radius-composer: 13px;                /* ×1.625 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --container: 1120px;

  --font-sans: 'Geist', 'Inter', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
}

/* Light palette: applied by system preference, and re-applied below by an
   explicit choice so the toggle wins in both directions. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --bg: #ffffff;                          /* grey(0xff) */
    --surface: oklch(0.968 0 0);            /* neutral(0.968) */
    --surface-raised: oklch(0.94 0 0);      /* neutral(0.940) */
    --surface-card: #ffffff;                /* grey(0xff) */
    --element-hover: rgb(26 26 26 / 0.06);  /* hsla(0,0,.10,.06) */
    --element-active: rgb(26 26 26 / 0.10); /* hsla(0,0,.10,.10) */
    --border: rgb(0 0 0 / 0.10);            /* hsla(0,0,0,.10) */
    --border-strong: rgb(0 0 0 / 0.17);     /* hsla(0,0,0,.17) */
    --text-full: oklch(0.25 0 0);           /* neutral(0.25), bezel text */
    --text-muted: oklch(0.439 0 0);         /* neutral(0.439) */
    --text-faint: oklch(0.535 0 0);         /* neutral(0.535) */
    --solid: oklch(0.205 0 0);              /* neutral(0.205) */
    --on-solid: oklch(0.985 0 0);           /* neutral(0.985) */
    --accent: oklch(0.511 0 0);             /* neutral(0.511), no chroma (C1) */
    --danger: oklch(0.577 0.245 27.325);    /* red-600 */
    --warning: oklch(0.555 0.163 48.998);   /* amber-700 */
    --success: oklch(0.596 0.145 163.225);  /* emerald-600 */
    --success-muted: oklch(0.508 0.118 165.612); /* emerald-700 */
    --busy: oklch(0.592 0.249 0.584);       /* pink-600 */
    --ring: rgb(0 0 0 / 0.35);              /* hairline_for(Light, 0.35) */
    --code-wash: rgb(0 0 0 / 0.06);         /* black/6 */
    --brand-coral: #AD581F;                 /* sirio_theme brand_coral, light */
    --terminal-surface: #ffffff;            /* sirio_theme terminal_surface, paper white */
    --frame-surface: var(--surface);        /* translucent in the app; opaque on a page */
  }
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #ffffff;                          /* grey(0xff) */
  --surface: oklch(0.968 0 0);            /* neutral(0.968) */
  --surface-raised: oklch(0.94 0 0);      /* neutral(0.940) */
  --surface-card: #ffffff;                /* grey(0xff) */
  --element-hover: rgb(26 26 26 / 0.06);  /* hsla(0,0,.10,.06) */
  --element-active: rgb(26 26 26 / 0.10); /* hsla(0,0,.10,.10) */
  --border: rgb(0 0 0 / 0.10);            /* hsla(0,0,0,.10) */
  --border-strong: rgb(0 0 0 / 0.17);     /* hsla(0,0,0,.17) */
  --text-full: oklch(0.25 0 0);           /* neutral(0.25), bezel text */
  --text-muted: oklch(0.439 0 0);         /* neutral(0.439) */
  --text-faint: oklch(0.535 0 0);         /* neutral(0.535) */
  --solid: oklch(0.205 0 0);              /* neutral(0.205) */
  --on-solid: oklch(0.985 0 0);           /* neutral(0.985) */
  --accent: oklch(0.511 0 0);             /* neutral(0.511), no chroma (C1) */
  --danger: oklch(0.577 0.245 27.325);    /* red-600 */
  --warning: oklch(0.555 0.163 48.998);   /* amber-700 */
  --success: oklch(0.596 0.145 163.225);  /* emerald-600 */
  --success-muted: oklch(0.508 0.118 165.612); /* emerald-700 */
  --busy: oklch(0.592 0.249 0.584);       /* pink-600 */
  --ring: rgb(0 0 0 / 0.35);              /* hairline_for(Light, 0.35) */
  --code-wash: rgb(0 0 0 / 0.06);         /* black/6 */
  --brand-coral: #AD581F;                 /* sirio_theme brand_coral, light */
  --terminal-surface: #ffffff;            /* sirio_theme terminal_surface, paper white */
  --frame-surface: var(--surface);        /* translucent in the app; opaque on a page */
}
@font-face { font-family: 'Geist'; font-weight: 400; font-display: swap; src: url('/fonts/Geist-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 500; font-display: swap; src: url('/fonts/Geist-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 600; font-display: swap; src: url('/fonts/Geist-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 400; font-display: swap; src: url('/fonts/GeistMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 500; font-display: swap; src: url('/fonts/GeistMono-Medium.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand-coral); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; color: var(--text-full); }
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.05; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; }
h3 { font-size: 1.125rem; line-height: 1.3; }
p { margin: 0; }
code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.9em; }
code { padding: 0.1em 0.35em; border-radius: var(--radius-chip); background: var(--code-wash); }
pre { padding: var(--space-4); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); overflow-x: auto; }
pre code { padding: 0; background: none; font-size: 0.875rem; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.container { width: min(100% - 2 * var(--space-4), var(--container)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus-visible { position: fixed; top: var(--space-2); left: var(--space-2); width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--surface); color: var(--text-full); border: 1px solid var(--border-strong); z-index: 20; }

.button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-4); height: 40px;
  border-radius: var(--radius-control); border: 1px solid transparent;
  font: inherit; font-weight: 500; font-size: 0.9375rem; cursor: pointer; white-space: nowrap;
}
.button--primary { background: var(--solid); color: var(--on-solid); }
.button--primary:hover { color: var(--on-solid); filter: brightness(1.08); }
.button--secondary { background: transparent; color: var(--text-full); border-color: var(--border-strong); }
.button--secondary:hover { background: var(--element-hover); color: var(--text-full); }

.prose { color: var(--text); max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2.25em; padding-top: 0.75em; border-top: 1px solid var(--border); }
.prose h3 { margin-top: 1.75em; }
.prose a { color: var(--text-full); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.prose a:hover { color: var(--brand-coral); text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.35em; }
.prose table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.prose th { color: var(--text-muted); font-weight: 500; }
.prose blockquote { margin: 0; padding-left: var(--space-4); border-left: 2px solid var(--border-strong); color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.toggle[data-astro-cid-l6lhmie6] {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.toggle[data-astro-cid-l6lhmie6]:hover {
  background: var(--element-hover);
  color: var(--text-full);
}

.moon[data-astro-cid-l6lhmie6] {
  display: none;
}

:root[data-theme="light"] .sun[data-astro-cid-l6lhmie6] {
  display: none;
}

:root[data-theme="light"] .moon[data-astro-cid-l6lhmie6] {
  display: block;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .sun[data-astro-cid-l6lhmie6] {
    display: none;
  }

  :root:not([data-theme="dark"]) .moon[data-astro-cid-l6lhmie6] {
    display: block;
  }
}
.nav[data-astro-cid-wpvy4v7s] {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.row[data-astro-cid-wpvy4v7s] {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 56px;
}

.brand[data-astro-cid-wpvy4v7s] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--text-full);
}

.brand[data-astro-cid-wpvy4v7s] img[data-astro-cid-wpvy4v7s] {
  border-radius: var(--radius-control);
}

nav[data-astro-cid-wpvy4v7s] {
  margin-left: auto;
}

ul[data-astro-cid-wpvy4v7s] {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

nav[data-astro-cid-wpvy4v7s] a[data-astro-cid-wpvy4v7s] {
  color: var(--text-muted);
  font-size: .9375rem;
}

nav[data-astro-cid-wpvy4v7s] a[data-astro-cid-wpvy4v7s]:hover {
  color: var(--text-full);
}
.footer[data-astro-cid-jo6i4kqk] {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: var(--space-4) 0;
  margin-top: 96px;
}

.row[data-astro-cid-jo6i4kqk] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: .875rem;
}

.brand[data-astro-cid-jo6i4kqk] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.brand[data-astro-cid-jo6i4kqk] img[data-astro-cid-jo6i4kqk] {
  border-radius: var(--radius-chip);
}

ul[data-astro-cid-jo6i4kqk] {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

a[data-astro-cid-jo6i4kqk]:hover {
  color: var(--text-full);
}