/* ============================================================================
   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) --------------------------------------
     NOT A TASTE CHOICE, AND NOT A PLACEHOLDER (S8). #585e71 is the value of
     --COLOR-PRIMARY in the theme stylesheet silkenanddreams.co itself serves,
     and it is the same value as their <meta name="theme-color">. #2d354f is
     their own --COLOR-PRIMARY-HOVER. Both were read off the live site on
     2026-08-12. It is set rather than left commented so nobody reads an
     unedited file as a decision, and it is deliberately nothing like the
     component's own orange, which is asserted by tests/test_brand_silken.py. */
  --client-accent:       #585E71;                 /* their --COLOR-PRIMARY */
  --client-accent-ink:   #2D354F;                 /* their --COLOR-PRIMARY-HOVER */
  --client-accent-glow:  rgba(88,94,113,.16);     /* accent glow alpha */
  --client-gradient:     linear-gradient(110deg, #2D354F, #585E71); /* thin accent hairline mark */

  /* ---- TYPE --------------------------------------------------------------
     Left on the component stack ON PURPOSE. Their site loads NO webfont at
     all: every one of --FONT-STACK-BODY, --FONT-STACK-HEADING,
     --FONT-STACK-ACCENT, --TYPE-STACK-NAV and --TYPE-STACK-BUTTON resolves to
     "Helvetica, Arial, sans-serif", there is not one @font-face rule, and
     their font-settings.css is a 38 byte empty file. There is therefore no
     typographic brand to carry over, and imposing Helvetica on an operator
     dashboard would be copying an absence rather than an identity. Revisit if
     they ever adopt a typeface and licence a file. */
  /* --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.
     Their own theme sets --BUTTON-RADIUS: 0px and every corner on their site
     is square, so the marks in /static/assets are drawn square. The dashboard
     itself keeps the system's radii: a client override here is a structural
     change to the component's shape, which client.css is not for. */
  /* --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);
}