/* ==========================================================================
   Sophicly Components — shared light/dark theme tokens (v3.9.10)
   --------------------------------------------------------------------------
   ONE source of truth for surface/text/border colours across every component,
   flipped by the LearnDash focus-mode theme toggle (html.light /
   html[data-theme="light"]). Components consume var(--sc-*) instead of
   hardcoding hex, so light/dark "just works" and new components inherit it.

   Brand colours (purple #5333ed / #2c003e, teal #51dacf) are NOT theme
   tokens — they are fixed identity. Only neutral surfaces/text/borders flip.
   No pure black (BRAND.md): dark text is #1a1a1e, dark surface charcoal.
   ========================================================================== */

:root {
    /* Dark (default) */
    --sc-surface:       #2a2b2e;   /* card / panel background          */
    --sc-surface-2:     #1f2023;   /* nested / sunken surface          */
    --sc-surface-hover: #333538;   /* hovered surface                  */
    --sc-text:          #f0f0f2;   /* primary text                     */
    --sc-text-muted:    rgba(255,255,255,0.62); /* body / secondary    */
    --sc-text-dim:      rgba(255,255,255,0.35); /* hints / meta        */
    --sc-border:        rgba(255,255,255,0.08); /* hairlines / dividers */
    --sc-accent:        #51dacf;                /* teal accent text     */
    --sc-accent-tint:   rgba(81,218,207,0.12);  /* teal accent fill     */
}

html[data-theme="light"], html.light {
    /* Light. Card surface is the Sophicly light-gray #e7e7ed (also the media
       player's playlist panel + several WML lessons) so a card reads as a
       distinct raised shade on the white page — NOT white-on-white with only a
       border, which looked flat. Page/recessed = lighter; hover = a touch darker. */
    --sc-surface:       #e7e7ed;
    --sc-surface-2:     #f5f5f7;
    --sc-surface-hover: #dddde1;
    --sc-text:          #1a1a1e;
    --sc-text-muted:    rgba(26,26,30,0.64);
    --sc-text-dim:      rgba(26,26,30,0.42);
    --sc-border:        rgba(0,0,0,0.08);
    --sc-accent:        #0e9b8d;                /* deeper teal for contrast on light */
    --sc-accent-tint:   rgba(14,155,141,0.12);
}