/* ============================================================================
   BRIORA — Bootstrap 5.3 theme layer
   Load order: bootstrap.min.css → briora-theme.css → per-page styles.

   Principle: customize BELOW Bootstrap (design tokens + each component's
   documented CSS-variable contract), never against it — no selector battles,
   no !important, one flat rule per decision.

   Drop-in target: nanovm-web/app/assets/stylesheets/ (replaces the token
   block of application.css). This file contains tokens, the Bootstrap
   bridge, restyled core components, and the app-wide typographic utilities.
   Page-specific components (input card, chat bubbles, stream tones, mode
   tabs markup) stay in their per-page stylesheets and consume tokens only.
   ========================================================================== */

/* ── 1 · Brand tokens (light) ───────────────────────────────────────────── */

:root {
  /* Brand palette (Briora_B.pdf) */
  --br-ink: #1e1e1e;        /* Schrift positiv */
  --br-paper: #ffffff;      /* ground */
  --br-turquoise: #73c5cb;  /* highlight, success, agent identity */
  --br-bluegray: #60a0bd;   /* interactive: links, active states */
  --br-plum: #2a2750;       /* the one strong surface (primary) */
  --br-raspberry: #dc4b4b;  /* errors and destructive, nothing else */

  /* Derived neutrals */
  --br-muted: #6f6f6f;
  --br-faint: #9b9b9b;
  --br-hairline: #dcdcdc;
  --br-tint: #f2f9fa;       /* türkis wash — hover / selected / agent bubble */
  --br-tint-plum: #f4f4f8;  /* plum wash — quiet panel / user bubble */

  /* Functional derivatives */
  --br-plum-strong: #3a366c;  /* plum hover / pressed */
  --br-plum-ink: #2a2750;     /* plum as text (code keywords, labels) */
  --br-agent: #3d9aa1;        /* agent identity as text (readable türkis) */

  /* ── Bootstrap bridge — the framework reads these ─────────────────────── */
  --bs-body-bg: var(--br-paper);
  --bs-body-color: var(--br-ink);
  --bs-body-font-size: 0.9375rem;          /* 15px */
  --bs-border-color: var(--br-hairline);
  --bs-secondary-color: var(--br-muted);   /* .text-body-secondary, help text */
  --bs-tertiary-color: var(--br-faint);
  --bs-secondary-bg: var(--br-tint-plum);
  --bs-tertiary-bg: var(--br-tint-plum);

  --bs-primary: var(--br-plum);
  --bs-primary-rgb: 42, 39, 80;
  --bs-danger: var(--br-raspberry);
  --bs-danger-rgb: 220, 75, 75;
  --bs-info: var(--br-turquoise);
  --bs-info-rgb: 115, 197, 203;
  --bs-secondary-rgb: 111, 111, 111;

  --bs-link-color: var(--br-bluegray);
  --bs-link-color-rgb: 96, 160, 189;
  --bs-link-hover-color: var(--br-ink);
  --bs-link-hover-color-rgb: 30, 30, 30;

  --bs-font-sans-serif: "Inter", -apple-system, system-ui, sans-serif;
  --bs-font-monospace: "IBM Plex Mono", "Fira Code", "Consolas", monospace;

  /* Radii — rationed: 3px on controls, 10px on cards/bubbles/modals */
  --bs-border-radius: 3px;
  --bs-border-radius-sm: 3px;
  --bs-border-radius-lg: 10px;
  --bs-border-radius-xl: 10px;

  --bs-focus-ring-color: rgba(96, 160, 189, 0.3);
}

/* ── 2 · Dark theme — Bootstrap's native mechanism (data-bs-theme) ──────── */

[data-bs-theme="dark"] {
  --br-ink: #ececf1;
  --br-paper: #171622;        /* plum-cast night ground */
  --br-muted: #a3a2ad;
  --br-faint: #6b6a76;
  --br-hairline: #34333f;
  --br-tint: #1f2e33;
  --br-tint-plum: #232136;
  --br-plum: #3d3878;         /* brightened a step for filled surfaces */
  --br-plum-strong: #4a4494;
  --br-plum-ink: #a29ce2;
  --br-agent: #6fc2c8;

  /* Re-assert bridge values that Bootstrap's own dark block sets as
     literals (this file loads after bootstrap.min.css, so we win). */
  --bs-body-bg: var(--br-paper);
  --bs-body-color: var(--br-ink);
  --bs-border-color: var(--br-hairline);
  --bs-secondary-color: var(--br-muted);
  --bs-tertiary-color: var(--br-faint);
  --bs-secondary-bg: var(--br-tint-plum);
  --bs-tertiary-bg: var(--br-tint-plum);
  --bs-primary-rgb: 61, 56, 120;
  --bs-link-color: var(--br-bluegray);
  --bs-link-color-rgb: 96, 160, 189;
  --bs-link-hover-color: var(--br-ink);
  --bs-link-hover-color-rgb: 236, 236, 241;
}

/* ── 3 · Element tuning — flat one-liners, no component overrides ───────── */

body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; }

a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

hr { border-top-color: var(--br-hairline); opacity: 1; }

/* Rule utilities — the ornament system */
.br-rule-ink    { border: 0; border-top: 1px solid var(--br-ink); margin: 0; opacity: 1; }
.br-rule-dashed { border: 0; border-top: 1px dashed var(--br-faint); margin: 0; opacity: 1; }

/* ── 4 · Buttons — via Bootstrap's --bs-btn-* contract ──────────────────── */

/* Base: flat, typographic. letter-spacing/transform have no --bs-btn-* var,
   so they're plain declarations on the same flat selector. */
.btn {
  --bs-btn-font-size: 0.75rem;     /* 12px */
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* .btn-group-sm > .btn: Bootstrap's small-group rule re-sets the font-size
   var with higher specificity than .btn-sm — mirror the override there too. */
.btn-sm,
.btn-group-sm > .btn {
  --bs-btn-font-size: 0.6875rem;   /* 11px */
  --bs-btn-padding-y: 0.3rem;
  --bs-btn-padding-x: 0.75rem;
}

/* Primary — Pflaume, the one filled element on most screens.
   Text on filled accent surfaces is always white, in both themes. */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--br-plum);
  --bs-btn-border-color: var(--br-plum);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--br-plum-strong);
  --bs-btn-hover-border-color: var(--br-plum-strong);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--br-plum-strong);
  --bs-btn-active-border-color: var(--br-plum-strong);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--br-plum);
  --bs-btn-disabled-border-color: var(--br-plum);
  --bs-btn-focus-shadow-rgb: 96, 160, 189;
}

/* Default ghost — ink border, tint wash on hover (mockup .br-btn) */
.btn-outline-dark {
  --bs-btn-color: var(--br-ink);
  --bs-btn-border-color: var(--br-ink);
  --bs-btn-hover-color: var(--br-ink);
  --bs-btn-hover-bg: var(--br-tint);
  --bs-btn-hover-border-color: var(--br-ink);
  --bs-btn-active-color: var(--br-ink);
  --bs-btn-active-bg: var(--br-tint);
  --bs-btn-active-border-color: var(--br-ink);
  --bs-btn-disabled-color: var(--br-ink);
  --bs-btn-disabled-border-color: var(--br-ink);
  --bs-btn-focus-shadow-rgb: 96, 160, 189;
}

/* Quiet ghost — hairline border, muted text (mockup .br-btn-quiet) */
.btn-outline-secondary {
  --bs-btn-color: var(--br-muted);
  --bs-btn-border-color: var(--br-hairline);
  --bs-btn-hover-color: var(--br-ink);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--br-ink);
  --bs-btn-active-color: var(--br-ink);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--br-ink);
  --bs-btn-disabled-color: var(--br-muted);
  --bs-btn-disabled-border-color: var(--br-hairline);
  --bs-btn-focus-shadow-rgb: 96, 160, 189;
}

/* Danger ghost — destructive confirmation moments (mockup .br-btn-danger) */
.btn-outline-danger {
  --bs-btn-color: var(--br-raspberry);
  --bs-btn-border-color: var(--br-raspberry);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--br-raspberry);
  --bs-btn-hover-border-color: var(--br-raspberry);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--br-raspberry);
  --bs-btn-active-border-color: var(--br-raspberry);
  --bs-btn-disabled-color: var(--br-raspberry);
  --bs-btn-disabled-border-color: var(--br-raspberry);
  --bs-btn-focus-shadow-rgb: 220, 75, 75;
}

/* Danger filled — Stop / Abort (mockup .br-btn-inverse-danger) */
.btn-danger {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--br-raspberry);
  --bs-btn-border-color: var(--br-raspberry);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #c23e3e;
  --bs-btn-hover-border-color: #c23e3e;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #c23e3e;
  --bs-btn-active-border-color: #c23e3e;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--br-raspberry);
  --bs-btn-disabled-border-color: var(--br-raspberry);
  --bs-btn-focus-shadow-rgb: 220, 75, 75;
}

/* Inverse — filled ink, for tool actions (CLI / Debug) that must read
   unmistakably as buttons. The one variant Bootstrap doesn't ship. */
.btn-inverse {
  --bs-btn-color: var(--br-paper);
  --bs-btn-bg: var(--br-ink);
  --bs-btn-border-color: var(--br-ink);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--br-bluegray);
  --bs-btn-hover-border-color: var(--br-bluegray);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--br-bluegray);
  --bs-btn-active-border-color: var(--br-bluegray);
  --bs-btn-disabled-color: var(--br-paper);
  --bs-btn-disabled-bg: var(--br-ink);
  --bs-btn-disabled-border-color: var(--br-ink);
  --bs-btn-focus-shadow-rgb: 96, 160, 189;
}

/* Chip modifier — mono lowercase mini-button for CLI quick commands.
   Compose: class="btn btn-inverse btn-chip" */
.btn-chip {
  --bs-btn-font-size: 0.75rem;
  --bs-btn-padding-y: 0.22rem;
  --bs-btn-padding-x: 0.6rem;
  font-family: var(--bs-font-monospace);
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ── 5 · Nav — .nav-underline is the mode-tab pattern ───────────────────── */

.nav-underline {
  --bs-nav-link-color: var(--br-faint);
  --bs-nav-link-hover-color: var(--br-ink);
  --bs-nav-link-font-weight: 600;
  --bs-nav-underline-gap: 1.4rem;
  --bs-nav-underline-border-width: 2px;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-underline .nav-link.active {
  color: var(--br-ink);
  border-bottom-color: var(--br-turquoise);
}

/* ── 6 · Forms ───────────────────────────────────────────────────────────── */

.form-control:focus,
.form-select:focus {
  border-color: var(--br-bluegray);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
  background-color: var(--br-bluegray);
  border-color: var(--br-bluegray);
}

/* ── 7 · Typographic utilities — the datasheet vocabulary ───────────────── */

/* Micro label — uppercase, tracked, tiny. */
.br-label {
  font-size: 0.65625rem;   /* 10.5px */
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--br-muted);
}

/* A label that navigates (e.g. the account email → profile settings). */
a.br-label {
  text-decoration: none;
}

a.br-label:hover {
  color: var(--br-ink);
  text-decoration: underline;
}

/* Index numeral — mono, faint, numbers things like a spec sheet. */
.br-index {
  font-family: var(--bs-font-monospace);
  font-size: 0.6875rem;    /* 11px */
  color: var(--br-faint);
  letter-spacing: 0.05em;
}