/* ── Der blasse Schimmer — Color System ──
   A world of warm neutrals. Every surface comes from the base palette.
   Category accents appear ONLY as small signals: labels, thin lines, dots —
   never as a full-bleed background of an entire frame.
   Never introduce colors outside this system (no purple, no neon). */

:root {
  /* ── Base palette ── */
  --dbs-alabaster:      #FAF6F0;  /* primary surface — default for all overlays */
  --dbs-porcelain:      #F2EAE1;  /* secondary surface, dividers, info panels */
  --dbs-white:          #FFFFFF;  /* type on dark, frame element */
  --dbs-espresso:       #2C2523;  /* primary text, dark frames, outro */
  --dbs-espresso-light: #4A3F3C;  /* secondary text, body copy */

  /* ── Category accents — use sparingly ── */
  --dbs-scent:    #9BABB5;  /* cool blue-grey — the invisible, olfactory, secret */
  --dbs-makeup:   #8A9A86;  /* sage — grounded, familiar, natural */
  --dbs-skincare: #B8A99A;  /* greige rosé — distilled from skin, serious, body-near */
  --dbs-curls:    #A8706A;  /* muted rose-gold red — alive, organic, warm copper */

  /* ── Espresso tints (text on light, derived alphas) ── */
  --dbs-espresso-72: rgba(44, 37, 35, 0.72);
  --dbs-espresso-55: rgba(44, 37, 35, 0.55);
  --dbs-espresso-40: rgba(44, 37, 35, 0.40);
  --dbs-espresso-25: rgba(44, 37, 35, 0.25);
  --dbs-espresso-12: rgba(44, 37, 35, 0.12);
  --dbs-espresso-08: rgba(44, 37, 35, 0.08);

  /* ── Alabaster tints (text on dark / video) ── */
  --dbs-alabaster-72: rgba(250, 246, 240, 0.72);
  --dbs-alabaster-55: rgba(250, 246, 240, 0.55);
  --dbs-alabaster-40: rgba(250, 246, 240, 0.40);
  --dbs-alabaster-25: rgba(250, 246, 240, 0.25);

  /* ── Neutral tone-on-tone block / band (replaces dark full-bleeds) ──
     Light depth: an oversized offset block or a bottom band, never a heavy bleed. */
  --dbs-linen:  #EAE0D4;  /* one step deeper than porcelain — quiet color-block surface */

  /* ── Feature accent (product-reactive, OPTIONAL) ──
     Sample per post from the hero product. It enters ONLY as a pale wash (the block/band)
     + a saturated hairline/dot — NEVER as a full-bleed background. Defaults are neutral,
     so an un-themed frame just looks calm; override both per post to tie it to the product:
       [data-feature] { --dbs-feature-wash:#EBD9C7; --dbs-feature-line:#C58A5E; }  (e.g. warm orange) */
  --dbs-feature-wash:  var(--dbs-linen);        /* pale block/band — the only place the product color fills area */
  --dbs-feature-line:  var(--dbs-espresso-25);  /* saturated hairline / dot */

  /* ── Frosted-glass surfaces (overlays over live video) ──
     Slightly transparent base tones + backdrop blur = frosted glass. */
  --dbs-glass-alabaster: rgba(250, 246, 240, 0.85);
  --dbs-glass-porcelain: rgba(242, 234, 225, 0.82);
  --dbs-glass-espresso:  rgba(44, 37, 35, 0.62);
  --dbs-glass-blur:      14px;

  /* ── Semantic aliases ── */
  --text-primary:    var(--dbs-espresso);
  --text-secondary:  var(--dbs-espresso-light);
  --text-on-dark:    var(--dbs-alabaster);
  --text-muted:      var(--dbs-espresso-40);
  --surface-page:    var(--dbs-alabaster);
  --surface-card:    var(--dbs-porcelain);
  --surface-overlay: var(--dbs-glass-alabaster);
  --surface-dark:    var(--dbs-espresso);
  --surface-block:   var(--dbs-linen);
  --feature-wash:    var(--dbs-feature-wash);
  --feature-line:    var(--dbs-feature-line);
  --hairline:        var(--dbs-espresso-12);
  --hairline-on-dark: rgba(255, 255, 255, 0.22);

  /* category accent alias — overridden per scope */
  --accent: var(--dbs-skincare);
}

/* Category scopes — set [data-category] on any overlay root to theme its accent. */
[data-category="scent"]    { --accent: var(--dbs-scent); }
[data-category="makeup"]   { --accent: var(--dbs-makeup); }
[data-category="skincare"] { --accent: var(--dbs-skincare); }
[data-category="curls"]    { --accent: var(--dbs-curls); }