/**
 * Roddier App — Brand signature (batch A, purely additive)
 * ──────────────────────────────────────────────────────────────────────
 * Loaded AFTER app.css: uses its tokens (--tint, --brand-navy, --bg-*,
 * label-*…) and does not REDEFINE any existing one. It overrides no app.css rule:
 * everything is either a new selector (.brand-halo*), a more specific focus refinement
 * (:focus-visible), or a variant carrying a new token.
 *
 * Style guide: navy #0f2544 + DESATURATED blue halos (#5e7fa8, “blue light” style guide).
 * Saturated blue avoided; navy-tinted shadows instead of pure black; no emoji.
 *
 * Contents:
 *   1. Additive tokens (signature)
 *   2. Blue halos / mesh — .brand-halo*
 *   3. Focus-visible: navy ring + soft halo (replaces the browser outline)
 *   4. Navy-tinted text selection
 *   5. Subtly tinted scrollbars
 *   6. Light details
 *   7. prefers-reduced-motion
 *   8. Dark mode variants (grouped together)
 */

/* ─── 1. Additive tokens (new names, do not change existing ones) ─── */
:root {
  /* Desaturated brand blue (the « lumière bleue » guidelines) for halos. */
  --brand-sig-halo:        rgba(94, 127, 168, 0.22);
  --brand-sig-halo-strong: rgba(94, 127, 168, 0.30);
  /* Focus ring: brand navy + soft halo. */
  --brand-sig-focus-ring:  #0f2544;
  --brand-sig-focus-glow:  rgba(15, 37, 68, 0.18);
  /* Text selection: translucent navy, readable text. */
  --brand-sig-selection-bg: rgba(15, 37, 68, 0.16);
  --brand-sig-selection-fg: #0f2544;
  /* Subtly navy-tinted scrollbar. */
  --brand-sig-scroll-thumb:       rgba(15, 37, 68, 0.22);
  --brand-sig-scroll-thumb-hover: rgba(15, 37, 68, 0.38);
}

/* ─── 2. Blue halos / mesh — .brand-halo* ────────────────────────────────
 * Decorative: laid behind an area (dashboard header, public hero).
 * Add to a position:relative container (or use .brand-halo-host,
 * which sets the context and keeps the content above the pseudo-element).
 * No text → decorative; pointer-events:none; intercepts nothing.
 * ──────────────────────────────────────────────────────────────────────── */

/* Host: applies the halo through ::before without overloading the markup. */
.brand-halo-host { position: relative; }
.brand-halo-host > * { position: relative; z-index: 1; }
.brand-halo-host::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* Variant 1: a single diffuse halo, centered at the top. Subtle. */
.brand-halo--soft::before,
.brand-halo--soft {
  background:
    radial-gradient(60% 80% at 50% 0%, var(--brand-sig-halo) 0%, transparent 70%);
}

/* Variant 2: mesh — 2-3 overlapping, asymmetrical, desaturated halos. */
.brand-halo--mesh::before,
.brand-halo--mesh {
  background:
    radial-gradient(45% 60% at 15% 0%,  var(--brand-sig-halo)        0%, transparent 65%),
    radial-gradient(40% 55% at 85% 10%, var(--brand-sig-halo)        0%, transparent 62%),
    radial-gradient(55% 70% at 50% 100%, var(--brand-sig-halo-strong) 0%, transparent 72%);
}

/* Utility variant (standalone element, e.g. <div class="brand-halo"> as an
 * absolutely positioned background placed manually). Diffuse and soft. */
.brand-halo {
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 30%, var(--brand-sig-halo) 0%, transparent 68%);
}

/* ─── 3. Focus-visible: navy ring + soft halo ────────────────────────────
 * CLEANLY replaces the browser outline with a crisp navy ring + a soft
 * halo. Focus always VISIBLE (never outline:none without a replacement).
 * Targets common interactive elements to avoid surprises.
 * ──────────────────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-sig-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px var(--brand-sig-focus-glow);
}

/* ─── 4. Navy-tinted text selection ──────────────────────────────────────
 * More specific than the app.css ::selection rule (which remains in place):
 * use a navy tint with readable navy text. */
:root ::selection {
  background: var(--brand-sig-selection-bg);
  color: var(--brand-sig-selection-fg);
}
:root ::-moz-selection {
  background: var(--brand-sig-selection-bg);
  color: var(--brand-sig-selection-fg);
}

/* ─── 5. Subtly tinted scrollbars ───────────────────────────────────────
 * Firefox: scrollbar-color (thumb + track). WebKit: navy-tinted thumb.
 * Subtle, do not shout. The app.css rules remain; this refines the tint. */
html {
  scrollbar-color: var(--brand-sig-scroll-thumb) transparent;
  scrollbar-width: thin;
}
:root *::-webkit-scrollbar-thumb {
  background: var(--brand-sig-scroll-thumb);
  background-clip: padding-box;
}
:root *::-webkit-scrollbar-thumb:hover {
  background: var(--brand-sig-scroll-thumb-hover);
  background-clip: padding-box;
}

/* ─── 6. Light details ──────────────────────────────────────────────────
 * Navy caret accent in input fields (brand consistency). */
input,
textarea {
  caret-color: var(--brand-sig-focus-ring);
}

/* ─── 7. prefers-reduced-motion ─────────────────────────────────────────
 * Halos are static (no animation is introduced here). Safeguard in case
 * a transition is added later to signature elements. */
@media (prefers-reduced-motion: reduce) {
  .brand-halo,
  .brand-halo-host::before,
  .brand-halo--soft,
  .brand-halo--mesh {
    animation: none !important; /* neutralises any future animation on the signature */
    transition: none !important;
  }
}

/* ─── 8. Dark mode variants ─────────────────────────────────────────────
 * On a dark background: slightly stronger halos (light blue looks wrong otherwise),
 * focus ring in light desaturated blue (navy disappears on a black background),
 * selection and scrollbars retuned. */
:root[data-theme="dark"] {
  --brand-sig-halo:        rgba(94, 127, 168, 0.26);
  --brand-sig-halo-strong: rgba(94, 127, 168, 0.34);
  --brand-sig-focus-ring:  #8fb0d6;                 /* light navy readable on a dark background */
  --brand-sig-focus-glow:  rgba(143, 176, 214, 0.22);
  --brand-sig-selection-bg: rgba(143, 176, 214, 0.26);
  --brand-sig-selection-fg: #eaf1fa;
  --brand-sig-scroll-thumb:       rgba(255, 255, 255, 0.16);
  --brand-sig-scroll-thumb-hover: rgba(255, 255, 255, 0.30);
}

/* ── Roddier signature: super-dock refinement (navy glass/brand consistency).
   Loaded after components.css → overrides the dock's base values. ── */
.super-dock { background: color-mix(in srgb, #0f2544 64%, transparent); border-radius: 24px; }
.super-dock .dock-tile { border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18); }
.super-dock .dock-app.is-active::after { background: #7aa2d6; box-shadow: 0 0 6px 1px rgba(122,162,214,.6); }