/* ============================================================
   Clever design tokens — shipped with the plugin (see clvr-design/delivery.md)
   = clvr-design tokens.css (shared structural tokens)
   + clvr-design themes/lwc.css (List With Clever palette + fonts)
   Shared :root first, theme :root second so the palette wins.
   Variables only — never add @font-face / @import / a webfont here.
   ============================================================ */

/* ---- Shared structural tokens (identical across all Clever sites) ---- */
:root {
  --clvr-success:         #43a046;  /* lwc-wbhfc-design green (was teal #00B373) */
  --clvr-error:           #f44336;
  --clvr-warning:         #ff9800;
  --clvr-info:            #2196f3;

  --clvr-border:          #bfcbde;
  --clvr-border-light:    #dde4ed;  /* lwc-wbhfc-design card border (was #E5E7EB) */

  --clvr-weight-normal:   400;
  --clvr-weight-semibold: 600;
  --clvr-weight-bold:     700;

  --clvr-radius:          12px;  /* LCR card radius */
  --clvr-radius-sm:       4px;
  --clvr-radius-pill:     9999px;

  /* Navy-tinted shadows per lwc-wbhfc-design (was flatter rgba(12,20,42,...)). */
  --clvr-shadow:          0 1px 3px rgba(0, 46, 93, 0.08), 0 4px 12px rgba(0, 46, 93, 0.06);
  --clvr-shadow-lg:       0 4px 8px rgba(0, 46, 93, 0.08), 0 12px 32px rgba(0, 46, 93, 0.10);

  --clvr-transition:      200ms ease;

  --clvr-content-width:   810px;
  --clvr-wide-width:      1144px;

  --clvr-sp-1:  0.25rem;
  --clvr-sp-2:  0.5rem;
  --clvr-sp-3:  0.75rem;
  --clvr-sp-4:  1rem;
  --clvr-sp-6:  1.5rem;
  --clvr-sp-8:  2rem;
  --clvr-sp-10: 2.5rem;
  --clvr-sp-12: 3rem;
  --clvr-sp-16: 4rem;
}

/* ---- List With Clever theme (palette + fonts; CLO colors, LWC fonts) ---- */
:root {
  /* Palette aligned to live LCR-system values (see clvr-design-skill-gaps log). */
  --clvr-blue:            #161E26;   /* lcr-dark (headings/structure) */
  --clvr-blue-dark:       #0d141b;
  --clvr-orange:          #0075EB;   /* lcr-blue (accent) — kept as-is, not moving to lwc-wbhfc-design's true CTA orange #FF6900 */
  --clvr-orange-dark:     #005bb5;   /* lwc-wbhfc-design dark-blue (was #005FBF) */
  --clvr-on-accent:       #ffffff;
  --clvr-btn-radius:      8px;  /* LCR button radius */

  --clvr-text:            #22293b;
  --clvr-text-secondary:  #6D798A;  /* lwc-wbhfc-design grey (was #4b698b) */
  --clvr-text-muted:      #86a5c6;
  --clvr-text-light:      #bfcbde;
  --clvr-text-inverse:    #ffffff;

  --clvr-bg:              #ffffff;
  --clvr-bg-subtle:       #f5f8fc;
  --clvr-bg-muted:        #f3f5f9;
  --clvr-bg-tint:         #F0F5FA;
  --clvr-bg-neutral:      #f0f0f0;
  --clvr-surface-subtle:  #F9FAFB;  /* live LWC page background */
  --clvr-hero-top:        #E8F2FE;  /* live LWC hero gradient top */
  --clvr-blue-light:      #E8F2FE;  /* tint surface for blue cards */
  --clvr-blue-border:     #BFDBFE;

  --clvr-link:            #0075EB;
  --clvr-link-hover:      #005bb5;  /* lwc-wbhfc-design dark-blue (was #005FBF) */

  /* Body = Poppins to match the live LCR pages (Inter fallback); headings = Rubik. */
  --clvr-font:            'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --clvr-font-heading:    'Rubik', 'Inter', sans-serif;

  /* Green family re-derived from lwc-wbhfc-design's --clvr-success (#43a046).
     Dark variant borrows the skill's own score-gradient ">=90" band (#15803d,
     same hue family); tint/border are same-family shades since the skill only
     names one swatch. */
  --clvr-success-dark:    #15803d;
  --clvr-success-tint:    #EEF6EC;
  --clvr-success-border:  #8FCB92;
}