/* ============================================================================
   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) --------------------------------------
     Kosso Nutrition. accent is the brand blue the tenant pack publishes
     (theme.json "accent": "#2787CC"); the gradient's light stop is the cyan
     sampled from the KN badge in the delivered logo (#54CBF4). Nothing here
     was picked by eye against the brand: both values come from the client's
     own delivered assets. */
  --client-accent:       #2787CC;                 /* the brand color (theme.json) */
  --client-accent-ink:   #1E699F;                 /* darkened accent for text on an accent tint */
  --client-accent-glow:  rgba(39,135,204,.16);    /* accent glow alpha */
  --client-gradient:     linear-gradient(110deg, #2787CC, #54CBF4); /* thin accent hairline mark */

  /* ---- TYPE --------------------------------------------------------------
     Left on the component stack ON PURPOSE. The pack's own face ("KN",
     theme.json fontFamily) ships sealed inside kosso.pack and is licensed for
     the render engine, not for a dashboard; shipping a lookalike would be a
     guess about the client's type. Revisit if the client delivers the webfont. */
  /* --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);
}