/* =============================================================
   Dapple Service Desk — brand overlay for Zammad 7.x
   Loaded by nginx as the last stylesheet in <head>; see the
   branding block in the role's nginx template.

   Values come from the design system's colors_and_type.css. Do
   not take them from the branding guide's prose, which quotes a
   pre-July-2026 paper and hairline.

   The overlay re-points tokens, not rules. Zammad declares 105
   custom properties on :root and re-declares 70 of them on
   [data-theme='dark'], so the whole classic interface can be
   moved off its default blue by overriding a dozen names. Rules
   are only written where Zammad has no token for the thing --
   which, in practice, is the typeface.
   ============================================================= */

/* ---------- 1. Type ----------
   Only 300/400/500 are shipped. The brand's weight ceiling is
   500, and a face the browser cannot load is a face no markup
   can accidentally reach. 600/700 exist in the design system
   and are deliberately withheld here.

   TrueType rather than the woff2 the guide asks for: the design
   system bundle ships .ttf only, and no converter is available
   in this repo's toolchain. nginx gzips them on the way out,
   which recovers most of the difference; moving to woff2 later
   is a swap of these three files and the format() hint. */
@font-face {
  font-family: "Geist";
  src: url("/dapple-branding/fonts/Geist-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/dapple-branding/fonts/Geist-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/dapple-branding/fonts/Geist-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand primitives, named so the overrides below read as a map
     rather than as a list of hexes. */
  --dapple-violet: #5c0fc9; /* violet-500 — primary fill, carries white text */
  --dapple-violet-hover: #44099a; /* violet-600 */
  --dapple-violet-mid: #8b4fe6; /* violet-400 — mixed fill/text roles */
  --dapple-violet-tint: #c2a7f2; /* violet-200 — accent text on dark */
  --dapple-violet-pale: #e7dff8; /* violet-100 — glows, pale fills */
  --dapple-violet-wash: #f6f2fd; /* violet-50 */
  --dapple-violet-deep: #2c0668; /* violet-800 */
  --dapple-ink: #0b0f2b; /* neutral-900 — ink surfaces */
  --dapple-paper: #fcfbfe; /* neutral-50 — page surface */
  --dapple-hairline: #dcdad3; /* neutral-150 — hairline borders */
  --dapple-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
}

/* Zammad sets the family on `body` and lets almost everything
   inherit; form controls are the exception, because the browser
   default wins there unless a rule says otherwise. */
html,
body,
input,
textarea,
select,
button,
.content,
.sidebar {
  font-family: var(--dapple-font-sans);
  letter-spacing: 0;
}

/* Weight ceiling. Chrome only: emphasis inside an article body
   is the customer's own markup, and flattening it would change
   what their message says rather than how the product looks. */
h1,
h2,
h3,
h4,
.heading {
  font-weight: 500;
}

/* ---------- 2. Accent ----------
   Zammad's default highlight blue is the strongest signal that
   this is someone else's product. These are the tokens that
   carry it.

   Tokens declared here on plain :root deliberately apply in both
   appearances: this sheet loads after Zammad's, so a :root
   declaration outranks Zammad's own [data-theme='dark'] block by
   order. That is correct only for a fill that keeps its colour
   in both themes. Anything whose contrast depends on the surface
   behind it must go in section 3 or 4 instead, which are scoped
   to one appearance each and cannot leak into the other. */
:root {
  /* Primary action. Violet is the one brand fill that carries
     white text, which is what this token is for. */
  --button-primary-background: var(--dapple-violet);
  --button-primary-background-active: var(--dapple-violet-hover);

  /* --highlight is consumed as a background 14 times and as a
     colour 8 times in the same sheet. A mixed-role token has to
     keep its lightness or one of the two roles breaks, so it
     takes violet-400 (L~61%) in place of Zammad's hsl(205 90% 60%)
     rather than the much darker primary. */
  --highlight: var(--dapple-violet-mid);
}

/* The login screen, the fullscreen views and the secondary menus
   all resolve to --background-tertiary, and Zammad keeps it dark
   in both appearances. Moving it to brand ink keeps it dark, so
   the white lockup the role installs stays the correct one --
   which is why it belongs with the mode-independent tokens. */
:root {
  --background-tertiary: var(--dapple-ink);
}

/* ---------- 3. Light appearance ----------
   :not([data-theme="dark"]) rather than plain :root. A light
   value on plain :root would outrank Zammad's own dark block on
   document order and follow the user into dark mode -- which for
   a page background means Zammad's near-white dark-mode text on
   a near-white surface. Scoping it to light means the dark value
   is simply Zammad's own, and stays theirs across upgrades
   instead of being pinned to a hex copied out of this release.

   Kept deliberately shallow. Zammad's light surfaces are already
   near-white, so re-pointing the page tint and the hairline is
   the whole of the gain; re-tinting every panel is where a
   re-skin turns into unreadable chips. */
:root:not([data-theme="dark"]) {
  --background-primary: var(--dapple-paper);
  --border: var(--dapple-hairline);

  --text-link: var(--dapple-violet);
  --border-highlight: var(--dapple-violet);
  --shadow-highlight: var(--dapple-violet-pale);
  --background-highlight: var(--dapple-violet-wash);
  --text-muted-highlight: var(--dapple-violet-pale);
}

/* ---------- 4. Dark appearance ----------
   Zammad switches on a data-theme attribute set from the user's
   own preference, NOT on prefers-color-scheme. Writing these as
   a media query -- as the branding guide's draft does -- would
   apply them to a user who picked light on a dark-OS machine.

   :root[data-theme='dark'] also outranks the :root blocks above
   on specificity, so the light values cannot leak in here
   whatever order the file is read in. */
:root[data-theme="dark"] {
  /* Primary violet against a dark panel is too dark to read as
     text, so accent *text* lifts to violet-200 while accent
     *fills* keep the primary. */
  --text-link: var(--dapple-violet-tint);
  --border-highlight: var(--dapple-violet-mid);
  --shadow-highlight: var(--dapple-violet-deep);
  --background-highlight: var(--dapple-violet-deep);
  --text-muted-highlight: var(--dapple-violet-tint);

  /* Zammad's dark charcoal panels are left alone on purpose. The
     guide would re-tint them to ink navy; that touches every
     surface in the product for a gain that is invisible next to
     the accent correction, and it is the change most likely to
     break on an upgrade. */
}

/* ---------- 5. Vue interfaces (mobile, and desktop if enabled) ----------
   Zammad 7 ships a second, Tailwind-based front end on /mobile
   and /desktop. It shares no token names with the classic
   interface, so it needs its own map.

   Only the two ramp steps that mean the same thing in both Vue
   bundles are touched. The desktop bundle overrides the ramp
   with Zammad's own teal and the mobile bundle keeps a stock
   Tailwind ramp, so the pale steps disagree between the two and
   re-pointing them would fix one surface and break the other.
   Steps 800 and 900 are the accent and its dark variant in both,
   and together carry the large majority of accent usage.

   --color-blue* without a step exist only in the mobile bundle;
   they are inert in the desktop one. */
:root,
:host {
  --color-blue-800: var(--dapple-violet);
  --color-blue-900: var(--dapple-violet-hover);
  --color-blue: var(--dapple-violet);
  --color-blue-dark: var(--dapple-violet-hover);
  --color-blue-highlight: #5c0fc919;
  --default-font-family: var(--dapple-font-sans);
}

/* -------------------------------------------------------------
   Login note.

   Zammad renders the maintenance_login message in .alert--success,
   whose green is the one colour on the sign-in page that belongs to
   no part of the brand. It is informational text, not a success
   state, so it is restyled to the pale violet wash rather than left
   shouting green next to a violet button.
   ------------------------------------------------------------- */
.js-maintenanceLogin.alert--success {
  background: var(--dapple-violet-wash);
  border: 1px solid var(--dapple-violet-pale);
  color: var(--dapple-violet-deep);
}

/* -------------------------------------------------------------
   Agent interface chrome.

   The tokens above reach type and controls, but three of the
   largest painted surfaces in the agent UI are styled by rules
   that read none of them, so they stayed Zammad's until named
   directly here.
   ------------------------------------------------------------- */

/* The sidebar is the biggest single surface on screen and was
   Zammad's neutral #25262c, close enough to dark to pass a glance
   but not the brand ink. */
.navigation.vertical {
  background: var(--dapple-ink);
}

/* Zammad's hummingbird is an <svg><use> against a sprite sheet
   inside the package, so it cannot be swapped at source without
   editing files an upgrade replaces. Hiding the sprite and
   painting the mark as a background keeps the change in our own
   stylesheet, where it survives upgrades. */
.logo .icon-logo {
  display: none;
}

.logo {
  background-image: url("/dapple-branding/dapple-mark-white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
}

/* The create action carries Zammad's green as brand chrome rather
   than as meaning, so it takes the accent. Checkmarks and other
   status greens are deliberately left alone: recolouring a success
   state to the brand colour would cost the signal it carries. */
.icon-plus.user-menu-icon {
  fill: var(--dapple-violet-mid);
}