/* ============================================================================
   PER-CLIENT BRAND OVERRIDES
   ----------------------------------------------------------------------------
   This is the ONLY stylesheet a client copy edits to reskin the build. It is
   loaded AFTER theme.css, so anything set here wins. Every slot ships
   commented out: the component runs on the 187N corporate default until a
   client build uncomments its brand values.

   HOW IT WORKS: theme.css consumes each slot through
       var(--client-accent, <187N default>)
   so an override here re-points the value in ALL three modes at once
   (corporate, light, dark). The brand color stays constant; the mode only
   changes surfaces and ink around it.

   DO NOT add structural overrides here (ink weights, lines, status colors,
   shadows, spacing, the band contract). Those are locked on purpose so a
   client copy cannot drift the system. If a client genuinely needs a
   structural change, that is a system change, not a client override.
   >>> B13 EXCEPTION: the "website-look" section at the bottom of this file
   >>> deliberately exceeds the slot contract on a dev-lead directive
   >>> (Martin Veltman, 2026-07-24): the dashboard mirrors the client's
   >>> webshop, bamboodisposables.com. Documented in DECISIONS.md B13 and
   >>> flagged upstream as a content-os theming gap. theme.css is untouched.

   Non-CSS brand data (business name, logo path, document title) lives in
   client.config.js, which the app reads at runtime.
   ============================================================================ */

/* Bamboo Disposables brand fonts. The webshop (bamboodisposables.com) runs
   Assistant for every role: headings, body, UI labels (B13; supersedes the
   B8 Lora-display choice for this surface). Lora stays self-hosted and
   carries the serif italic-accent slot, the one place the system wants a
   serif. Self-hosted latin subsets; Assistant is a variable font. */
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/assets/fonts/assistant-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/assets/fonts/lora-latin.woff2") format("woff2");
}

:root {
  /* ---- ACCENT (the one brand color) -------------------------------------- */
  /* Website green system (bamboodisposables.com, B13): brand green #3D6A2F
     is the accent (product CTAs, sale badges, eyebrows on the site), with
     #2F5D30 as its darkened ink duty and bright leaf #57A73D as the gradient
     partner. The B8 logo-olive #506D00 remains in the logo artwork itself. */
  --client-accent:       #3D6A2F;                 /* website brand green */
  --client-accent-ink:   #2F5D30;                 /* darkened green for text on a tint */
  --client-accent-glow:  rgba(61,106,47,.20);     /* accent glow alpha */
  --client-gradient:     linear-gradient(110deg, #3D6A2F, #57A73D);

  /* ---- TYPE (website: Assistant everywhere) ------------------------------ */
  --client-font-display: "Assistant", "Segoe UI", system-ui, sans-serif;
  --client-font-sans:    "Assistant", "Segoe UI", system-ui, sans-serif;
  --client-font-mono:    "Assistant", "Segoe UI", system-ui, sans-serif;

  /* ---- GEOMETRY ---------------------------------------------------------- */
  /* Website shape language is big-rounded (cards 2.4rem): scale every radius. */
  --client-radius-scale: 1.2;
}

/* ============================================================================
   B13: BAMBOO WEBSITE-LOOK OVERRIDES (documented divergence, DECISIONS.md B13)
   ----------------------------------------------------------------------------
   Goal: the dashboard reads as bamboodisposables.com. Ink #10261C drives
   text, hairlines AND shadows (the site's signature); surfaces are white on
   a warm sage paper (#F2F4EF family); CTAs are green pills; the coral washes
   that theme.css hardcodes (--teal-wash*) are re-derived from the accent so
   no supplier orange survives. theme.css itself is byte-identical; when
   content-os grows real slots for these, this section collapses into them.
   ============================================================================ */

:root {
  /* the wash gap: theme.css hardcodes coral washes; derive them from the
     accent so nav hover/active, chips, focus rings and row hovers go green */
  --teal-wash:   color-mix(in srgb, var(--client-accent) 8%, transparent);
  --teal-wash-2: color-mix(in srgb, var(--client-accent) 13%, transparent);
  --teal-bright: #57A73D;
  --grad-b:      #57A73D;

  /* corporate mode = the webshop world: white cards on warm sage paper,
     pine ink #10261C for text, hairlines and shadows alike */
  --canvas:      #F7F9F4;
  --canvas-2:    #EFF2EA;
  --surface:     #FFFFFF;
  --surface-2:   #F9FBF6;
  --surface-3:   #F0F4EC;

  --ink:        #10261C;
  --ink-strong: #0B1B13;
  --ink-body:   rgba(16,38,28,.84);
  --ink-muted:  rgba(16,38,28,.58);
  --ink-faint:  rgba(16,38,28,.44);
  --ink-label:  rgba(16,38,28,.70);

  --line:         rgba(16,38,28,.11);
  --line-strong:  rgba(16,38,28,.18);
  --line-faint:   rgba(16,38,28,.06);

  /* soft ambient float, green-black like the site, never grey-black */
  --shadow-xs:   0 1px 2px rgba(16,38,28,.05);
  --shadow-sm:   0 1px 2px rgba(16,38,28,.05), 0 2px 8px rgba(16,38,28,.04);
  --shadow-md:   0 2px 6px rgba(16,38,28,.06), 0 18px 44px rgba(16,38,28,.08);
  --shadow-lg:   0 4px 12px rgba(16,38,28,.07), 0 40px 90px rgba(16,38,28,.11);
  --shadow-teal: 0 16px 35px rgba(16,38,28,.08);
  --inset-hi:    inset 0 1px 0 rgba(255,255,255,.8);

  /* pill world: the chamfer notch collapses so CTAs can round fully */
  --chamfer: 0px;

  --enamel:        linear-gradient(158deg, #FFFFFF, #EEF3EA);
  --enamel-border: rgba(16,38,28,.14);
  --tour-scrim:    rgba(11,27,19,.45);

  /* the serif italic-accent slot carries the brand's own serif */
  --f-serif: "Lora", Georgia, serif;
}

/* light mode: the whiter site variant (site sections on a pure white page) */
[data-theme="light"] {
  --canvas:      #FFFFFF;
  --canvas-2:    #F5F8F2;
  --surface:     #FFFFFF;
  --surface-2:   #F8FAF5;
  --surface-3:   #EFF3EB;

  --ink:        #10261C;
  --ink-strong: #0B1B13;
  --ink-body:   rgba(16,38,28,.86);
  --ink-muted:  rgba(16,38,28,.60);
  --ink-faint:  rgba(16,38,28,.45);
  --ink-label:  rgba(16,38,28,.72);

  --line:        rgba(16,38,28,.10);
  --line-strong: rgba(16,38,28,.17);
  --line-faint:  rgba(16,38,28,.06);

  --teal-wash:   color-mix(in srgb, var(--client-accent) 8%, transparent);
  --teal-wash-2: color-mix(in srgb, var(--client-accent) 13%, transparent);
  --teal-bright: #57A73D;
  --grad-a:      #2F5D30;
  --grad-b:      #57A73D;

  /* status language matches corporate so the modes read as one family */
  --st-live:    #2E9E6B;  --st-live-2: #36B97D;  --st-idle: #96A093;
  --st-warn:    #CC8A2C;  --st-error:  #C53A22;  --st-pending: #5B61B0;
  --st-live-glow:    rgba(46,158,107,.22);
  --st-warn-glow:    rgba(204,138,44,.22);
  --st-error-glow:   rgba(197,58,34,.22);
  --st-pending-glow: rgba(91,97,176,.22);
  --st-live-tint:    rgba(46,158,107,.12);
  --st-warn-tint:    rgba(204,138,44,.13);
  --st-error-tint:   rgba(197,58,34,.12);
  --st-pending-tint: rgba(91,97,176,.13);
  --st-idle-tint:    rgba(16,38,28,.06);

  /* the instrument slab goes deep pine instead of navy */
  --ip-bg:     radial-gradient(150% 130% at 8% -10%, #1B3A2A, #10261C 52%, #081209);
  --ip-seam:   var(--teal);

  --shadow-xs: 0 1px 2px rgba(16,38,28,.05);
  --shadow-sm: 0 1px 2px rgba(16,38,28,.05), 0 2px 8px rgba(16,38,28,.04);
  --shadow-md: 0 2px 6px rgba(16,38,28,.06), 0 18px 40px rgba(16,38,28,.09);
  --shadow-lg: 0 4px 12px rgba(16,38,28,.07), 0 40px 80px rgba(16,38,28,.13);
  --shadow-teal: 0 14px 40px rgba(61,106,47,.16);

  --chamfer: 0px;
  --enamel:        linear-gradient(158deg, #FFFFFF, #EEF3EA);
  --enamel-border: rgba(16,38,28,.14);
  --tour-scrim:    rgba(11,27,19,.45);
  --f-serif: "Lora", Georgia, serif;
}

/* dark mode: deep pine cockpit built from the site's ink, with a brighter
   leaf accent because the one-value --client-accent is too dim on dark
   (single-slot limit, flagged upstream in B13) */
[data-theme="dark"] {
  --canvas:      #0A130D;
  --canvas-2:    #0D1811;
  --surface:     #152519;
  --surface-2:   #1B2F21;
  --surface-3:   #223A29;

  /* the component's dark status greens are teal-mint; pin live to the warm
     brand-green family so badges and dots keep reading as Bamboo */
  --st-live:      #4CC470;
  --st-live-2:    #63D584;
  --st-live-glow: rgba(76,196,112,.30);
  --st-live-tint: rgba(76,196,112,.14);

  --ink:        #ECF4ED;
  --ink-strong: #FFFFFF;
  --ink-body:   rgba(236,244,237,.84);
  --ink-muted:  rgba(236,244,237,.60);
  --ink-faint:  rgba(236,244,237,.42);
  --ink-label:  rgba(236,244,237,.66);

  --teal:        #6FBF5B;
  --teal-ink:    #8FD07E;
  --teal-bright: #8FD07E;
  --teal-glow:   rgba(111,191,91,.30);
  --teal-wash:   color-mix(in srgb, #6FBF5B 10%, transparent);
  --teal-wash-2: color-mix(in srgb, #6FBF5B 15%, transparent);
  --grad-a:      #2F5D30;
  --grad-b:      #8FD07E;
  --gradient:    linear-gradient(110deg, #57A73D, #8FD07E);

  --ip-bg:   radial-gradient(150% 130% at 8% -10%, #1B3A2A, #0E2116 52%, #060D09);
  --ip-seam: var(--teal);

  --chamfer: 0px;
  --tour-scrim: rgba(0,0,0,.64);
  --f-serif: "Lora", Georgia, serif;
}

/* ---- shape: the site's pill CTA language --------------------------------- */
.btn { border-radius: var(--r-pill); }

/* corporate CTAs: green pill like the webshop, not the ink block, no chamfer */
[data-theme="corporate"] .btn-primary,
[data-theme="corporate"] .btn-secondary {
  clip-path: none;
  border-radius: var(--r-pill);
}
[data-theme="corporate"] .btn-primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 16px 35px rgba(16,38,28,.08);
}
[data-theme="corporate"] .btn-primary:hover {
  background: #2F5D30;
  box-shadow: 0 20px 42px rgba(16,38,28,.12);
  transform: translateY(-1px);
}
.chamfer { clip-path: none; }

/* ---- atmosphere: sage corner glow instead of coral/gold or navy ---------- */
[data-theme="corporate"] .bg-field::after {
  background:
    radial-gradient(680px 460px at 80% -6%, rgba(206,229,201,.34), transparent 60%),
    radial-gradient(560px 420px at 4% 104%, rgba(242,244,239,.85), transparent 62%);
}
[data-theme="light"] .bg-field::after {
  background:
    radial-gradient(680px 460px at 80% -6%, rgba(215,235,211,.45), transparent 58%),
    radial-gradient(560px 420px at 4% 104%, rgba(206,229,201,.28), transparent 62%);
}
[data-theme="dark"] .bg-field::after {
  background:
    radial-gradient(680px 460px at 80% -6%, rgba(111,191,91,.10), transparent 60%),
    radial-gradient(560px 420px at 4% 104%, rgba(27,58,42,.35), transparent 62%);
}

/* corporate report panel and its ledger grid, tinted to the sage paper */
[data-theme="corporate"] .instrument-panel {
  background: linear-gradient(162deg, #FCFDFB 0%, #EAF0E4 100%);
}
[data-theme="corporate"] .instrument-panel::after {
  background-image: linear-gradient(rgba(16,38,28,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(16,38,28,.05) 1px, transparent 1px);
}

/* selection reads green, not coral */
[data-theme="corporate"] ::selection { background: rgba(61,106,47,.20); color: var(--ink); }

/* the site's signature: uppercase eyebrows carry the brand green */
.eyebrow { color: var(--teal-ink); }
[data-theme="dark"] .eyebrow { color: rgba(143,208,126,.85); }

/* login: the enamel logo badge follows the sage world (the page styles this
   inline, so the override needs the extra html specificity) */
html .auth-mark {
  background: linear-gradient(158deg, #FFFFFF, #EEF3EA);
  border-color: rgba(16,38,28,.14);
}