/* ============================================================================
   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.
   >>> The ACCENT WASHES block further down is the COMPONENT's own, verbatim
   >>> from content-os 1c268fc: it is not an instance override and is not
   >>> edited here (B14).
   >>> 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;
}

/* ============================================================================
   ACCENT WASHES (component block, VERBATIM from content-os 1c268fc client.css)
   ----------------------------------------------------------------------------
   theme.css hardcodes --teal-wash / --teal-wash-2 per mode instead of routing
   them through the accent slot, so a client that sets --client-accent still
   got the component's own accent in nav hover/active, chip.active, .btn-ghost
   hover, focus rings, table row hover and the spotlight glow. theme.css is
   VERBATIM and may not be edited (D18), so the washes are re-derived here.

   Each wash is color-mix(accent, transparent) at the SAME alpha theme.css
   used, and the fallback inside var() is that mode's original color. With no
   --client-accent set (the component default) every wash resolves to exactly
   the value theme.css shipped, so this block changes nothing until a client
   brand lands. All three modes are listed because client.css loads after
   theme.css: a bare :root here would otherwise beat theme.css's own
   [data-theme=...] blocks at equal specificity and flatten light and dark.

   B14: this instance carried its OWN copy of this fix (a corporate and a
   light wash pair derived from --client-accent). The component grew the same
   fix upstream, so the local one is deleted and this verbatim block is what
   runs. The dark block below re-states its washes on purpose: dark runs the
   brighter leaf #6FBF5B rather than --client-accent (B13), so its wash has to
   follow the leaf, and it is a brand value rather than the coral fix.
   ============================================================================ */

:root {
  --teal-wash:   color-mix(in srgb, var(--client-accent, #FF6301) 7%, transparent);
  --teal-wash-2: color-mix(in srgb, var(--client-accent, #FF6301) 10%, transparent);
}

[data-theme="light"] {
  --teal-wash:   color-mix(in srgb, var(--client-accent, #066377) 6%, transparent);
  --teal-wash-2: color-mix(in srgb, var(--client-accent, #066377) 10%, transparent);
}

[data-theme="dark"] {
  --teal-wash:   color-mix(in srgb, var(--client-accent, #4BBDF0) 8%, transparent);
  --teal-wash-2: color-mix(in srgb, var(--client-accent, #4BBDF0) 13%, transparent);
}

/* ============================================================================
   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. theme.css itself
   is byte-identical; when content-os grows real slots for these, this section
   collapses into them. Every block below loads AFTER the component wash block
   above, so a value re-stated here wins.
   ============================================================================ */

:root {
  --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-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);
}