/* ============================================================================
   VoxCloud branding-overlay voor Yopass
   ----------------------------------------------------------------------------
   Open-source-vriendelijke rebrand zonder license-key: we overschrijven alleen
   de DaisyUI --color-* custom properties (oklch, zoals DaisyUI v5 vereist) en
   de header-wordmark. De React-bundel blijft ongewijzigd.

   Kleuren afgeleid van VoxCloud Color System v2 (Branding/tokens/colors.json),
   omgezet naar oklch:
     vox-blue-600  #085c99  primary
     vox-blue-700  #064a7a  primary hover/active
     vox-purple-500 #8e44ad secondary (= MetaVox-accent)
     vox-blue-400  #3893cc  accent
     vox-blue-300  #6fb4dd  primary in dark theme
     vox-purple-300 #b985cc secondary in dark theme
   ============================================================================ */

/* --- Light theme (DaisyUI 'emerald') ------------------------------------- */
[data-theme="emerald"] {
  --color-primary: oklch(46.361% 0.1217 248.216);          /* vox-blue-600  */
  --color-primary-content: oklch(100% 0 0);                /* white         */
  --color-secondary: oklch(52.606% 0.1705 314.653);        /* vox-purple-500 */
  --color-secondary-content: oklch(100% 0 0);
  --color-accent: oklch(63.480% 0.1205 240.284);           /* vox-blue-400  */
  --color-accent-content: oklch(100% 0 0);
  --color-neutral: oklch(26.835% 0.0573 240.320);          /* vox-blue-900  */
  --color-neutral-content: oklch(100% 0 0);
}

/* --- Dark theme (DaisyUI 'dim') ------------------------------------------ */
[data-theme="dim"] {
  --color-primary: oklch(73.981% 0.0917 235.951);          /* vox-blue-300  */
  --color-primary-content: oklch(20% 0.04 248);            /* deep navy ink */
  --color-secondary: oklch(69.300% 0.1159 316.734);        /* vox-purple-300 */
  --color-secondary-content: oklch(20% 0.04 314);
  --color-accent: oklch(63.480% 0.1205 240.284);           /* vox-blue-400  */
  --color-accent-content: oklch(100% 0 0);
}

/* --- Header wordmark: toon "VoxCloud" i.p.v. "Yopass" --------------------
   De header is een <a href="/"> met een <img> (ons VoxCloud-merk) + een
   <span> met de app-naam. --app-name is license-gated, dus vervangen we de
   tekst puur in CSS. */
header a[href="/"] span,
nav a[href="/"] span,
a[href="/"] > span.truncate {
  font-size: 0;                /* verberg originele "Yopass"-tekst */
  letter-spacing: 0;
}
header a[href="/"] span::after,
nav a[href="/"] span::after,
a[href="/"] > span.truncate::after {
  content: "VoxCloud";
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-base-content);
}