/* ============================================================================
   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.

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

:root {
  /* ---- ACCENT (the one brand color) --------------------------------------
     PLACEHOLDER (R8). Robin Bouwman has delivered no brand colour. This is not
     a colour we picked: it is styleTokens.accent out of Leon Ghatas's pilot
     brand.json for Little Life Hacks (handover fixtures/clients/llh/synthesis/
     brand.json), which is the only accent for this client that exists in any
     document we hold. It is a placeholder for exactly that reason, and it is
     set rather than left commented so nobody reads an unedited file as a
     decision. Note it sits near the component's own default (#FF6301) by
     coincidence; tests/test_brand_robin.py pins the difference. */
  --client-accent:       #E4572E;                 /* llh brand.json styleTokens.accent */
  --client-accent-ink:   #B33C18;                 /* darkened accent for text on an accent tint */
  --client-accent-glow:  rgba(228,87,46,.16);     /* accent glow alpha */
  --client-gradient:     linear-gradient(110deg, #E4572E, #F2A65A); /* thin accent hairline mark */

  /* ---- TYPE --------------------------------------------------------------
     Left on the component stack ON PURPOSE. Leon's pilot brand.json declares
     fontFamily 'Inter' for the RENDERED ads; that is a render-engine
     declaration, not a licence for a dashboard, and no webfont has been
     delivered. Revisit when the brand pack lands. */
  /* --client-font-display: "Schibsted Grotesk", "Inter", system-ui, sans-serif; */
  /* --client-font-sans:    "Schibsted Grotesk", "Inter", system-ui, sans-serif; */
  /* --client-font-mono:    "Geist Mono", ui-monospace, monospace; */

  /* ---- GEOMETRY (optional) ----------------------------------------------- */
  /* One multiplier softens (1.3) or sharpens (0.7) every radius at once. */
  /* --client-radius-scale: 1; */
}

/* ============================================================================
   ACCENT WASHES (always on, no client edit needed)
   ----------------------------------------------------------------------------
   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.
   ============================================================================ */

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