/*
  theme.css (Ver.0799)
  - Purpose: provide a single, brand-level accent system without touching feature logic.
  - Policy: NO inline styles, NO jQuery, NO onclick additions.
  - Strategy: override only token variables + a few safe visual accents.

  References (see report/665.md):
  - MDN: Using CSS custom properties (var())
  - MDN: color-mix()
  - GitHub Primer: Color usage
*/

@layer tokens {
  :root{
    /* === Brand accent (Media platform / Violet) === */
    --brand-accent: #8B5CF6;
    --accent: var(--brand-accent);
    --accent-weak: color-mix(in oklab, var(--brand-accent) 14%, transparent);

    /* Subtle tint surfaces (keep structure intact, only mood change) */
    --surface-2: color-mix(in oklab, var(--surface) 92%, var(--brand-accent));
    --bar-bg: color-mix(in oklab, var(--surface) 90%, var(--brand-accent));
    --bar-border: color-mix(in oklab, var(--line) 75%, var(--brand-accent));

    /* Optional: let supported native controls adopt the accent */
    accent-color: var(--brand-accent);

    /* === Chips (limited secondary colors; applied only to chip UI) ===
       Policy: keep the page dark/neutral; allow color only on tags/chips.
    */
    --chip-radius: 999px;
    --chip-fg: color-mix(in oklab, var(--text) 84%, var(--brand-accent));
    --chip-bg: color-mix(in oklab, var(--surface) 88%, var(--brand-accent));
    --chip-border: color-mix(in oklab, var(--line) 72%, var(--brand-accent));

    /* Scope chips: subtle secondary hues (only for chips) */
    --chip-works: #22D3EE;   /* cyan */
    --chip-actors: #FB7185;  /* rose */
    --chip-posts: var(--brand-accent);
    --chip-neutral: color-mix(in oklab, var(--text) 25%, var(--line));
  }
}

/* Normalize section accents to the single brand accent (brand-first UI) */
[data-accent] {
  --accent: var(--brand-accent);
  --accent-weak: color-mix(in oklab, var(--brand-accent) 14%, transparent);
}

/* Header: keep dark, add a subtle violet bias (no layout change) */
.site-header{
  background: linear-gradient(
    90deg,
    #0F172A 0%,
    color-mix(in oklab, #0F172A 82%, var(--brand-accent)) 100%
  );
}

/* Cards: keep existing hover behavior, add a soft brand glow */
.card:hover{
  box-shadow:
    0 18px 60px rgba(17, 24, 39, .12),
    0 0 0 3px color-mix(in oklab, var(--brand-accent) 18%, transparent);
}

/* Links: preserve underline policy but increase discoverability */
a:hover{
  color: var(--brand-accent);
}

/* Fallbacks for older browsers without color-mix/oklab */
@supports not (color: color-mix(in oklab, white 50%, black)){
  :root{
    --accent-weak: rgba(139, 92, 246, .14);
    --surface-2: #f3f0ff;
    --bar-bg: #f2efff;
    --bar-border: rgba(139, 92, 246, .20);

    /* Chips fallback */
    --chip-radius: 999px;
    --chip-fg: #3b2a73;
    --chip-bg: rgba(139, 92, 246, .10);
    --chip-border: rgba(139, 92, 246, .22);

    --chip-works: #22D3EE;
    --chip-actors: #FB7185;
    --chip-posts: #8B5CF6;
    --chip-neutral: rgba(100,116,139,.40);
  }
  [data-accent]{
    --accent: #8B5CF6;
    --accent-weak: rgba(139, 92, 246, .14);
  }
}