/* ============================================================
   GHOST BAKERY — shared frontend theme layer
   Bootstrap 5.3 override layer. Loaded AFTER bootstrap.min.css
   and served to chef, boss and website at /static/shared/base.css.

   RULE: hex literals live ONLY in the ramp below. Everything
   else references a variable. If you are about to write a hex
   anywhere past the "Bootstrap global tokens" block, stop.
   See etc/docs/design-system.md.
   ============================================================ */

/* ------------------------------------------------------------
   Self-hosted IBM Plex, not pulled from a font CDN, on purpose:
   the product sells "test without touching real personal data"
   and the LGPD data-protection page promises no third-party
   processing of visitor data — a Google Fonts request would leak
   every visitor's IP to a third party and contradict that
   promise. Do not swap this for a CDN link. Unmodified upstream
   woff2 files (github.com/IBM/plex), SIL OFL 1.1 — see
   fonts/README.md and fonts/LICENSE.txt. No italic: the design
   system does not use it (synthetic oblique covers code comments).
   ------------------------------------------------------------ */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/shared/fonts/ibm-plex-sans-regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/shared/fonts/ibm-plex-sans-semibold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/shared/fonts/ibm-plex-mono-regular.woff2") format("woff2");
}

:root {
  /* --- Oxblood ramp (source of truth) --- */
  --ox-50:  #FDF4F1;
  --ox-100: #F5DFDA;
  --ox-200: #E6BDB7;
  --ox-300: #CE8C86;
  --ox-400: #B25E5A;
  --ox-500: #93403F;
  --ox-600: #762D32;
  --ox-700: #5A2327;
  --ox-800: #431A1D;
  --ox-900: #2C1214;

  /* --- Warm neutrals --- */
  --ink-50:  #F8F5F2;
  --ink-100: #EAE3DD;
  --ink-300: #A89A93;
  --ink-500: #6B5D57;
  --ink-700: #3B2E2B;
  --ink-800: #241B19;
  --ink-900: #19110F;

  --teal-600: #14706B;
  --teal-400: #4CAFA6;

  /* --- Bootstrap global tokens --- */
  --bs-primary: var(--ox-600);
  --bs-primary-rgb: 118, 45, 50;
  --bs-secondary: var(--ink-500);
  --bs-secondary-rgb: 107, 93, 87;
  --bs-success: #2F7A4E;
  --bs-success-rgb: 47, 122, 78;
  --bs-danger: #CB4124;
  --bs-danger-rgb: 203, 65, 36;
  --bs-warning: #A76A11;
  --bs-warning-rgb: 167, 106, 17;
  --bs-info: var(--teal-600);
  --bs-info-rgb: 20, 112, 107;

  --bs-link-color: var(--ox-600);
  --bs-link-color-rgb: 118, 45, 50;
  --bs-link-hover-color: var(--ox-800);
  --bs-link-hover-color-rgb: 67, 26, 29;

  --bs-body-bg: #FFFFFF;
  --bs-body-color: var(--ink-800);
  --bs-secondary-bg: var(--ink-50);
  --bs-tertiary-bg: var(--ink-50);
  --bs-border-color: var(--ink-100);
  --bs-emphasis-color: var(--ink-900);
  --bs-heading-color: var(--ink-900);
  --bs-secondary-color: var(--ink-500);

  --bs-border-radius: .375rem;
  --bs-font-sans-serif: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-font-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --bs-focus-ring-color: rgba(118, 45, 50, .25);

  /* --- Syntax tokens --- */
  --code-bg:      var(--ink-50);
  --code-keyword: var(--ox-500);
  --code-string:  #2F7A4E;
  --code-number:  #A76A11;
  --code-comment: #8C7F79;
  --code-func:    var(--teal-600);
  --code-type:    #6B5BA6;
  --code-plain:   var(--ink-800);

  --diff-add-bg: #E3F1E7;
  --diff-del-bg: #FBE3DA;
}

/* Light tokens, explicit. Needed so a wrapper can opt into light
   scoping (e.g. a card that is always bg-white/bg-light regardless of
   page theme) the same way [data-bs-theme="dark"] opts a wrapper into
   dark below — inheriting from :root only works at the root itself,
   not for a nested element inside a dark-scoped ancestor. */
[data-bs-theme="light"] {
  /* Plain elements with no color rule of their own (a <p>, for
     instance) don't re-resolve custom properties on their own — they
     inherit the "used value" of `color` from whatever ancestor last
     set it, which for most of this page is <body> in the opposite
     theme. Setting `color` here, not just the custom properties,
     re-anchors inheritance for everything under this wrapper. */
  color: var(--bs-body-color);
  --bs-primary: var(--ox-600);
  --bs-primary-rgb: 118, 45, 50;
  --bs-secondary: var(--ink-500);
  --bs-secondary-rgb: 107, 93, 87;
  --bs-success: #2F7A4E;
  --bs-success-rgb: 47, 122, 78;
  --bs-danger: #CB4124;
  --bs-danger-rgb: 203, 65, 36;
  --bs-warning: #A76A11;
  --bs-warning-rgb: 167, 106, 17;
  --bs-info: var(--teal-600);
  --bs-info-rgb: 20, 112, 107;

  --bs-link-color: var(--ox-600);
  --bs-link-color-rgb: 118, 45, 50;
  --bs-link-hover-color: var(--ox-800);
  --bs-link-hover-color-rgb: 67, 26, 29;

  --bs-body-bg: #FFFFFF;
  --bs-body-color: var(--ink-800);
  --bs-secondary-bg: var(--ink-50);
  --bs-tertiary-bg: var(--ink-50);
  --bs-border-color: var(--ink-100);
  --bs-emphasis-color: var(--ink-900);
  --bs-heading-color: var(--ink-900);
  --bs-secondary-color: var(--ink-500);

  --bs-focus-ring-color: rgba(118, 45, 50, .25);

  --code-bg:      var(--ink-50);
  --code-keyword: var(--ox-500);
  --code-string:  #2F7A4E;
  --code-number:  #A76A11;
  --code-comment: #8C7F79;
  --code-func:    var(--teal-600);
  --code-type:    #6B5BA6;
  --code-plain:   var(--ink-800);

  --diff-add-bg: #E3F1E7;
  --diff-del-bg: #FBE3DA;
}

/* Dark tokens. Applied when a wrapper opts in via the attribute
   (scoped, e.g. a read-only code block) OR when the whole page is
   in dark mode. The declarations are kept identical in both rules
   below; edit them together. */
[data-bs-theme="dark"] {
  color: var(--bs-body-color);
  --bs-primary: var(--ox-400);
  --bs-primary-rgb: 178, 94, 90;
  --bs-secondary: var(--ink-300);
  --bs-secondary-rgb: 168, 154, 147;
  --bs-success: #58B583;
  --bs-success-rgb: 88, 181, 131;
  --bs-danger: #E86A4E;
  --bs-danger-rgb: 232, 106, 78;
  --bs-warning: #D9A143;
  --bs-warning-rgb: 217, 161, 67;
  --bs-info: var(--teal-400);
  --bs-info-rgb: 76, 175, 166;

  --bs-link-color: var(--ox-300);
  --bs-link-color-rgb: 206, 140, 134;
  --bs-link-hover-color: var(--ox-200);
  --bs-link-hover-color-rgb: 230, 189, 183;

  --bs-body-bg: var(--ink-900);
  --bs-body-color: var(--ink-100);
  --bs-secondary-bg: var(--ink-800);
  --bs-tertiary-bg: #1F1614;
  --bs-border-color: #3A2C28;
  --bs-emphasis-color: #FFFFFF;
  --bs-heading-color: #FFFFFF;
  --bs-secondary-color: var(--ink-300);

  --bs-focus-ring-color: rgba(178, 94, 90, .3);

  --code-bg:      #1F1614;
  --code-keyword: var(--ox-300);
  --code-string:  #86C79E;
  --code-number:  #D9A143;
  --code-comment: #857772;
  --code-func:    #64BFB7;
  --code-type:    #A69BE0;
  --code-plain:   var(--ink-100);

  --diff-add-bg: #1C3324;
  --diff-del-bg: #3D211A;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --bs-primary: var(--ox-400);
    --bs-primary-rgb: 178, 94, 90;
    --bs-secondary: var(--ink-300);
    --bs-secondary-rgb: 168, 154, 147;
    --bs-success: #58B583;
    --bs-success-rgb: 88, 181, 131;
    --bs-danger: #E86A4E;
    --bs-danger-rgb: 232, 106, 78;
    --bs-warning: #D9A143;
    --bs-warning-rgb: 217, 161, 67;
    --bs-info: var(--teal-400);
    --bs-info-rgb: 76, 175, 166;

    --bs-link-color: var(--ox-300);
    --bs-link-color-rgb: 206, 140, 134;
    --bs-link-hover-color: var(--ox-200);
    --bs-link-hover-color-rgb: 230, 189, 183;

    --bs-body-bg: var(--ink-900);
    --bs-body-color: var(--ink-100);
    --bs-secondary-bg: var(--ink-800);
    --bs-tertiary-bg: #1F1614;
    --bs-border-color: #3A2C28;
    --bs-emphasis-color: #FFFFFF;
    --bs-heading-color: #FFFFFF;
    --bs-secondary-color: var(--ink-300);

    --bs-focus-ring-color: rgba(178, 94, 90, .3);

    --code-bg:      #1F1614;
    --code-keyword: var(--ox-300);
    --code-string:  #86C79E;
    --code-number:  #D9A143;
    --code-comment: #857772;
    --code-func:    #64BFB7;
    --code-type:    #A69BE0;
    --code-plain:   var(--ink-100);

    --diff-add-bg: #1C3324;
    --diff-del-bg: #3D211A;
  }
}

/* ============================================================
   Component overrides — REQUIRED.
   Bootstrap compiles these values into the stylesheet at build
   time; they do not read --bs-primary on their own.
   ============================================================ */

.btn-primary {
  --bs-btn-bg: var(--ox-600);
  --bs-btn-border-color: var(--ox-600);
  --bs-btn-hover-bg: var(--ox-700);
  --bs-btn-hover-border-color: var(--ox-700);
  --bs-btn-active-bg: var(--ox-800);
  --bs-btn-active-border-color: var(--ox-800);
  --bs-btn-disabled-bg: var(--ox-600);
  --bs-btn-disabled-border-color: var(--ox-600);
  --bs-btn-focus-shadow-rgb: 118, 45, 50;
}
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--ox-500);
  --bs-btn-border-color: var(--ox-500);
  --bs-btn-hover-bg: var(--ox-400);
  --bs-btn-hover-border-color: var(--ox-400);
  --bs-btn-active-bg: var(--ox-300);
  --bs-btn-active-border-color: var(--ox-300);
  --bs-btn-active-color: var(--ink-900);
  --bs-btn-disabled-bg: var(--ox-500);
  --bs-btn-disabled-border-color: var(--ox-500);
  --bs-btn-focus-shadow-rgb: 178, 94, 90;
}

.btn-outline-primary {
  --bs-btn-color: var(--ox-600);
  --bs-btn-border-color: var(--ox-600);
  --bs-btn-hover-bg: var(--ox-600);
  --bs-btn-hover-border-color: var(--ox-600);
  --bs-btn-active-bg: var(--ox-700);
  --bs-btn-active-border-color: var(--ox-700);
  --bs-btn-disabled-color: var(--ox-600);
  --bs-btn-disabled-border-color: var(--ox-600);
  --bs-btn-focus-shadow-rgb: 118, 45, 50;
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--ox-300);
  --bs-btn-border-color: var(--ox-500);
  --bs-btn-hover-bg: var(--ox-500);
  --bs-btn-hover-border-color: var(--ox-500);
  --bs-btn-active-bg: var(--ox-400);
  --bs-btn-active-border-color: var(--ox-400);
  --bs-btn-disabled-color: var(--ox-400);
  --bs-btn-disabled-border-color: var(--ox-500);
  --bs-btn-focus-shadow-rgb: 178, 94, 90;
}

.btn-danger {
  --bs-btn-bg: #CB4124; --bs-btn-border-color: #CB4124;
  --bs-btn-hover-bg: #AC361D; --bs-btn-hover-border-color: #AC361D;
  --bs-btn-active-bg: #8E2C17; --bs-btn-active-border-color: #8E2C17;
  --bs-btn-focus-shadow-rgb: 203, 65, 36;
}
.btn-success {
  --bs-btn-bg: #2F7A4E; --bs-btn-border-color: #2F7A4E;
  --bs-btn-hover-bg: #266440; --bs-btn-hover-border-color: #266440;
  --bs-btn-active-bg: #1E5133; --bs-btn-active-border-color: #1E5133;
  --bs-btn-focus-shadow-rgb: 47, 122, 78;
}
.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-hover-border-color: var(--ink-300);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-tertiary-bg);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-border-color: var(--ink-300);
}

.alert-primary {
  --bs-alert-color: var(--ox-800);
  --bs-alert-bg: var(--ox-50);
  --bs-alert-border-color: var(--ox-200);
  --bs-alert-link-color: var(--ox-900);
}
[data-bs-theme="dark"] .alert-primary {
  --bs-alert-color: var(--ox-200);
  --bs-alert-bg: #2B1618;
  --bs-alert-border-color: var(--ox-800);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--ox-400);
  box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-range::-webkit-slider-thumb { background-color: var(--bs-primary); }
.form-range::-moz-range-thumb { background-color: var(--bs-primary); }

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
  --bs-nav-link-color: var(--bs-secondary-color);
  --bs-nav-link-hover-color: var(--bs-primary);
}
.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--bs-primary);
  --bs-nav-link-color: var(--bs-secondary-color);
  --bs-nav-link-hover-color: var(--bs-primary);
}
.list-group {
  --bs-list-group-active-bg: var(--bs-primary);
  --bs-list-group-active-border-color: var(--bs-primary);
  --bs-list-group-action-hover-bg: var(--bs-secondary-bg);
}
.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.page-link { color: var(--bs-link-color); }
.progress { --bs-progress-bar-bg: var(--bs-primary); }
.spinner-border, .spinner-grow { color: var(--bs-primary); }

/* Nav theme toggle. Plain text-light nav-link rendered too small and
   low-contrast to read as a control; give it an explicit hit target,
   a visible circular affordance and a hover/focus state. */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink-50) 35%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-50);
  font-size: 1.15rem;
  line-height: 1;
}
.theme-toggle-btn:hover,
.theme-toggle-btn:focus-visible {
  background: color-mix(in srgb, var(--ink-50) 12%, transparent);
  border-color: color-mix(in srgb, var(--ink-50) 60%, transparent);
  color: var(--ink-50);
}
.theme-toggle-btn svg { display: block; }
/* Icon shows the theme a click switches TO, not the current one:
   a moon invites you into dark mode, a sun invites you back out. */
.theme-toggle-btn .icon-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle-btn .icon-sun { display: block; }
[data-bs-theme="dark"] .theme-toggle-btn .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .theme-toggle-btn .icon-sun { display: block; }
  :root:not([data-bs-theme="light"]) .theme-toggle-btn .icon-moon { display: none; }
}

/* ============================================================
   Base document + shared building blocks
   ============================================================ */

body {
  font-family: var(--bs-font-sans-serif);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--bs-emphasis-color);
  font-weight: 600;
}

.card {
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 2px 8px rgba(25, 17, 15, .06);
  transition: box-shadow .2s ease;
}
.card:hover {
  box-shadow: 0 4px 16px rgba(25, 17, 15, .10);
}

footer {
  color: var(--bs-secondary-color);
  font-size: .875rem;
}

.alert { border: none; border-radius: var(--bs-border-radius); }

.form-control-short { width: 7rem; }
.estimate-table { max-width: 360px; }
.limit-info { font-size: .75rem; color: var(--bs-secondary-color); }

.pricing-card {
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
}
.pricing-card.featured {
  border-color: var(--bs-primary);
  border-width: 2px;
}

.display-4 { font-size: 2.5rem; }

.btn .spinner-border {
  width: 1rem;
  height: 1rem;
  margin-right: .5rem;
}

html { scroll-behavior: smooth; }

:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .container { padding-top: 1rem; padding-bottom: 1rem; }
  .display-4 { font-size: 2rem; }
}

/* ============================================================
   Code surface
   Read-only blocks carry data-bs-theme="dark" on the wrapper and
   stay dark in both page themes. Editable blocks omit it and
   follow the ambient theme. Nested Bootstrap components (copy
   button, badges) inherit the scope automatically.
   ============================================================ */

.code-surface {
  background: var(--code-bg);
  color: var(--code-plain);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  font-family: var(--bs-font-monospace);
  font-size: .8125rem;
  line-height: 1.65;
  overflow: hidden;
}
.code-surface__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  font-size: .75rem;
}
.code-surface pre,
.code-surface .chroma {
  margin: 0;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
}
.code-surface .chroma pre { padding: 0; }

/* Inline + bare code fall back to the ambient code surface. */
pre {
  padding: 1rem;
  overflow-x: auto;
  font-size: .875rem;
  background-color: var(--code-bg);
  color: var(--code-plain);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
code {
  padding: .2rem .4rem;
  font-size: .875rem;
  background-color: var(--bs-secondary-bg);
  border-radius: .25rem;
}
pre code { padding: 0; background: none; }

#spec-editor {
  font-family: var(--bs-font-monospace);
  font-size: .875rem;
}

/* ------------------------------------------------------------
   Chroma token classes -> design tokens.
   This is the ONLY translation layer. Swapping highlighters
   means rewriting this block and nothing else.
   ------------------------------------------------------------ */
.chroma .k, .chroma .kc, .chroma .kd,
.chroma .kn, .chroma .kp, .chroma .kr   { color: var(--code-keyword); }
.chroma .kt, .chroma .nc, .chroma .nb,
.chroma .nn                              { color: var(--code-type); }
.chroma .s, .chroma .s1, .chroma .s2,
.chroma .sb, .chroma .sc, .chroma .sd   { color: var(--code-string); }
.chroma .m, .chroma .mi, .chroma .mf,
.chroma .mb, .chroma .mh, .chroma .mo   { color: var(--code-number); }
.chroma .c, .chroma .c1, .chroma .cm,
.chroma .cp, .chroma .cs                 { color: var(--code-comment); font-style: italic; }
.chroma .nf, .chroma .nx, .chroma .nd   { color: var(--code-func); }
.chroma .o, .chroma .ow, .chroma .p     { color: var(--code-plain); opacity: .75; }
.chroma .na, .chroma .nl                 { color: var(--code-keyword); }
.chroma .err                             { color: var(--bs-danger); }

/* Diff */
.chroma .gi { background: var(--diff-add-bg); display: block; }
.chroma .gd { background: var(--diff-del-bg); display: block; }
.chroma .gh, .chroma .gu { color: var(--code-comment); }

/* Line numbers */
.chroma .lnt, .chroma .ln {
  color: var(--code-comment);
  opacity: .6;
  user-select: none;
  margin-right: .75rem;
}
.chroma .hl { background: rgba(178, 94, 90, .14); display: block; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}