/*
 * Devoudit brand layer — loads after liftkit-core.css.
 *
 * Structure:
 *   1. Override LiftKit source palette vars with Devoudit brand colors
 *   2. Fix LiftKit's dark color-scheme default → light
 *   3. Devoudit semantic aliases (--bg, --ink-*, --accent, etc.) → LiftKit tokens
 *   4. Devoudit-specific tokens not in LiftKit (hairlines, pillar dots, density)
 *   5. Warm-tinted shadow overrides (replace LiftKit's cold shadows)
 *   6. dv-* utility classes (semantic CSS layer)
 *   7. dv-* control styles (button, input, card, badge, beacon)
 *
 * Typography: use LiftKit's --*-font-size / --*-line-height tokens directly.
 * Spacing: use --lk-size-* directly.
 */

/* ── 1. Brand palette — override LiftKit light source vars ────── */
:root {
  /* Primary → cobalt */
  --light__primary_lkv:              #0A5FFF;
  --light__onprimary_lkv:            #FFFFFF;
  --light__primarycontainer_lkv:     #D6E4FF;
  --light__onprimarycontainer_lkv:   #001A4D;

  /* Background / surface → warm oat */
  --light__background_lkv:           #F4F4EF;
  --light__onbackground_lkv:         #171511;
  --light__surface_lkv:              #FBFAF6;
  --light__onsurface_lkv:            #171511;
  --light__surfacecontainer_lkv:     #EDEBE4;
  --light__surfacecontainerlow_lkv:  #F3F1EB;
  --light__surfacecontainerhigh_lkv: #E6E4DC;
  --light__surfacevariant_lkv:       #EDEBE4;
  --light__onsurfacevariant_lkv:     #3B382F;

  /* Outline → warm hairline */
  --light__outline_lkv:              rgba(20,18,12,0.16);
  --light__outlinevariant_lkv:       rgba(20,18,12,0.09);

  /* Semantic status → Devoudit palette */
  --light__success_lkv:              #1F6B43;
  --light__onsuccess_lkv:            #FFFFFF;
  --light__successcontainer_lkv:     #C6F0DA;
  --light__onsuccesscontainer_lkv:   #002112;
  --light__warning_lkv:              #B47A00;
  --light__onwarning_lkv:            #FFFFFF;
  --light__warningcontainer_lkv:     #FFE4A0;
  --light__onwarningcontainer_lkv:   #271900;
  --light__error_lkv:                #B8391E;
  --light__onerror_lkv:              #FFFFFF;
  --light__errorcontainer_lkv:       #FFD9D2;
  --light__onerrorcontainer_lkv:     #3A0900;
}

/* ── 2. Fix LiftKit's dark color-scheme default ───────────────── */
html { color-scheme: light; }
html, body {
  background: var(--lk-background);
  color: var(--lk-onbackground);
}

/* ── 3. Devoudit semantic aliases → LiftKit tokens ────────────── */
:root {
  --bg:           var(--lk-background);
  --surface:      var(--lk-surface);
  --surface-sunk: var(--lk-surfacecontainer);

  --accent:       var(--lk-primary);
  --accent-ink:   var(--lk-onprimary);
  --accent-tint:  color-mix(in oklab, var(--accent) 10%, var(--bg));
  --accent-wash:  color-mix(in oklab, var(--accent) 6%, var(--bg));

  --ok:   var(--lk-success);
  --warn: var(--lk-warning);
  --stop: var(--lk-error);
}

/* ── 4. Devoudit-specific tokens ──────────────────────────────── */
:root {
  /* Warm ink scale — no direct LiftKit equivalent */
  --ink:   #171511;
  --ink-2: #3B382F;
  --ink-3: #6C685C;
  --ink-4: #9A9584;

  /* Hairlines — warm-tinted */
  --hairline:        rgba(20,18,12,0.09);
  --hairline-strong: rgba(20,18,12,0.16);

  /* Pillar category dots (content strategy) */
  --pillar-fear-dot:        #C8431D;
  --pillar-education-dot:   #B47A00;
  --pillar-stories-dot:     #C05A22;
  --pillar-tools-dot:       #1F7A63;
  --pillar-positioning-dot: #5E47D1;

  /* Radii */
  --r-2: 2px; --r-4: 4px; --r-6: 6px;
  --r-8: 8px; --r-12: 12px; --r-16: 16px;

  /* Density multiplier */
  --density: 1;

  /* Font families */
  --font-sans: "Noto Sans", "Noto Sans Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

[data-density="compact"]    { --density: 0.88; }
[data-density="comfortable"]{ --density: 1; }
[data-density="spacious"]   { --density: 1.18; }

[data-pillars="hidden"] {
  --pillar-fear-dot:        var(--ink-3);
  --pillar-education-dot:   var(--ink-3);
  --pillar-stories-dot:     var(--ink-3);
  --pillar-tools-dot:       var(--ink-3);
  --pillar-positioning-dot: var(--ink-3);
}

/* ── 5. Warm-tinted shadow overrides ──────────────────────────── */
:root {
  --shadow-sm: 0 1px 0 rgba(20,18,12,.04), 0 1px 2px rgba(20,18,12,.05);
  --shadow-md: 0 1px 0 rgba(20,18,12,.04), 0 4px 14px rgba(20,18,12,.06);
  --shadow-lg: 0 2px 0 rgba(20,18,12,.04), 0 20px 40px -12px rgba(20,18,12,.12);
}

/* ── 6. dv-* base typography ──────────────────────────────────── */
.dv-root {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-size: calc(var(--body-font-size) * var(--density));
  line-height: var(--body-line-height);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.dv-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--caption-font-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.dv-h1 {
  font-size: calc(var(--display2-font-size) * var(--density));
  line-height: var(--display2-line-height);
  letter-spacing: -0.022em;
  font-weight: 620;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.dv-h2 {
  font-size: calc(var(--title1-font-size) * var(--density));
  line-height: var(--title1-line-height);
  letter-spacing: -0.018em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
.dv-h3 {
  font-size: calc(var(--title2-font-size) * var(--density));
  line-height: var(--title2-line-height);
  letter-spacing: -0.012em;
  font-weight: 600;
  margin: 0;
}
.dv-lead {
  font-size: calc(var(--heading-font-size) * var(--density));
  line-height: var(--body-line-height);
  color: var(--ink-2);
  max-width: 58ch;
  text-wrap: pretty;
}
.dv-body  { font-size: calc(var(--body-font-size)        * var(--density)); color: var(--ink-2); }
.dv-small { font-size: calc(var(--subheading-font-size)  * var(--density)); color: var(--ink-3); }
.dv-meta  {
  font-family: var(--font-mono);
  font-size: var(--label-font-size);
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

/* ── 7. dv-* controls ─────────────────────────────────────────── */
.dv-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--lk-size-xs);
  height: 2.5em;
  padding: 0 1.25em;
  border-radius: var(--r-8);
  font: inherit;
  font-weight: 540;
  font-size: var(--subheading-font-size);
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.dv-btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--accent) 70%, black 30%),
    0 1px 1px rgba(0,0,0,0.04),
    0 4px 10px color-mix(in oklab, var(--accent) 22%, transparent);
}
.dv-btn--primary:hover  { filter: brightness(1.05); }
.dv-btn--primary:active { transform: translateY(1px); }

.dv-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.dv-btn--ghost:hover { background: var(--surface); }

.dv-btn--quiet {
  background: transparent;
  color: var(--ink-2);
  padding: 0 var(--lk-size-xs);
  height: auto;
  box-shadow: none;
}
.dv-btn--quiet:hover { color: var(--ink); }

.dv-input {
  appearance: none;
  height: 2.5em;
  padding: 0.75em 1em;
  font: inherit;
  font-size: var(--subheading-font-size);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-8);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.dv-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
.dv-input::placeholder { color: var(--ink-4); }

.dv-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-12);
  padding: calc(var(--lk-size-lg) * var(--density));
}

.dv-container {
  padding: calc(var(--lk-size-2xl) * var(--density)) calc(var(--lk-size-xl) * var(--density));
}

.dv-divider {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: 0;
}

.dv-badge {
  display: inline-flex; align-items: center; gap: var(--lk-size-xs);
  font-family: var(--font-mono);
  font-size: var(--caption-font-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 0.25em 0.6em;
  border-radius: 999px;
  font-weight: 500;
}
.dv-badge::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
}

/* Pulsing beacon dot */
@keyframes dv-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in oklab, var(--ok) 45%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in oklab, var(--ok)  0%, transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in oklab, var(--ok)  0%, transparent); }
}
.dv-beacon {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
  animation: dv-pulse 2.2s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.4s);
  display: inline-block;
  flex-shrink: 0;
}
.dv-beacon--warn { background: var(--warn); }
.dv-beacon--stop { background: var(--stop); }

@media (prefers-reduced-motion: reduce) {
  .dv-beacon { animation: none; }
}