/*
 * Flightpath widget themes
 * ------------------------
 * The widget reads every color from a --fp-* CSS variable, falling back to
 * the Classic look when a variable is not set. To theme a widget, add one
 * of these classes to its container element(s):
 *
 *   <link rel="stylesheet" href="flightpath-themes.css">
 *   <div id="chart" class="fp-theme-boardroom"></div>
 *
 * To make your own theme, copy a block, rename the class, and change any
 * values. Every variable is optional. The full list:
 *
 *   Chart        --fp-line             trend line + dots
 *                --fp-band-detractor   detractor band fill (scores 0-6)
 *                --fp-band-passive     passive band fill   (scores 7-8)
 *                --fp-band-promoter    promoter band fill  (scores 9-10)
 *                --fp-band-label       Promoter/Passive/Detractor text
 *                --fp-nonresponse      the x marker for non-responses
 *                --fp-axis             axis text
 *                --fp-tick             axis tick marks
 *                --fp-grid             gridlines (Actual NPS view)
 *                --fp-zero             the zero line (Actual NPS view)
 *                --fp-contact-line     individual contact lines (account view)
 *                --fp-contact-dot      individual contact dots (account view)
 *                --fp-score-text       score labels above the dots
 *                --fp-dot-stroke       outline ring around dots
 *                --fp-hover-line       the vertical hover guide
 *
 *   Surfaces     --fp-bg               widget background (also PNG export)
 *                --fp-text             primary text
 *                --fp-muted            secondary text
 *                --fp-subtle           tertiary text (comments, tooltip date)
 *                --fp-border           control borders
 *                --fp-border-soft      table header rule
 *                --fp-row-line         table row rule
 *                --fp-row-hover        table row + button hover
 *                --fp-control-bg       dropdown / button background
 *                --fp-control-text     dropdown / button text
 *                --fp-tip-bg           tooltip background
 *                --fp-tip-border       tooltip border
 *                --fp-link             links
 *                --fp-radius           widget corner radius
 *
 *   Table pills  --fp-pill-text            score pill text
 *                --fp-pill-detractor-text  detractor score pill text
 */

/*
 * 1. Classic — the default. Warm neutrals, CustomerGauge coral.
 * Listed in full as a reference; applying this class is the same as
 * applying no theme at all.
 */
.fp-theme-classic {
  --fp-line: #F2545B;
  --fp-band-detractor: #FBECEC;
  --fp-band-passive: #F7F7F5;
  --fp-band-promoter: #E8E8E5;
  --fp-band-label: #57534E;
  --fp-nonresponse: #9A9A97;
  --fp-axis: #78716C;
  --fp-tick: #A8A29E;
  --fp-grid: #EBE9E6;
  --fp-zero: #A8A29E;
  --fp-contact-line: #C9C6C2;
  --fp-contact-dot: #B5B2AD;
  --fp-score-text: #292524;
  --fp-dot-stroke: #FFFFFF;
  --fp-hover-line: #57534E;
  --fp-bg: #FFFFFF;
  --fp-text: #292524;
  --fp-muted: #78716C;
  --fp-subtle: #57534E;
  --fp-border: #D6D3D1;
  --fp-border-soft: #E7E5E4;
  --fp-row-line: #F0EEEC;
  --fp-row-hover: #F7F6F4;
  --fp-control-bg: #FFFFFF;
  --fp-control-text: #57534E;
  --fp-tip-bg: #FFFFFF;
  --fp-tip-border: #E7E5E4;
  --fp-link: #1C64C2;
  --fp-pill-text: #292524;
  --fp-pill-detractor-text: #B42318;
}

/*
 * 2. Boardroom — cool slate neutrals with a blue trend line.
 * Line color #2563EB validated for contrast on white.
 */
.fp-theme-boardroom {
  --fp-line: #2563EB;
  --fp-band-detractor: #FBEDED;
  --fp-band-passive: #F1F5F9;
  --fp-band-promoter: #DFE8F1;
  --fp-band-label: #475569;
  --fp-nonresponse: #8B9AAD;
  --fp-axis: #64748B;
  --fp-tick: #94A3B8;
  --fp-grid: #E2E8F0;
  --fp-zero: #94A3B8;
  --fp-contact-line: #CBD5E1;
  --fp-contact-dot: #AEBBCA;
  --fp-score-text: #1E293B;
  --fp-dot-stroke: #FFFFFF;
  --fp-hover-line: #475569;
  --fp-bg: #FFFFFF;
  --fp-text: #1E293B;
  --fp-muted: #64748B;
  --fp-subtle: #475569;
  --fp-border: #CBD5E1;
  --fp-border-soft: #E2E8F0;
  --fp-row-line: #F1F5F9;
  --fp-row-hover: #F8FAFC;
  --fp-control-bg: #FFFFFF;
  --fp-control-text: #475569;
  --fp-tip-bg: #FFFFFF;
  --fp-tip-border: #E2E8F0;
  --fp-link: #2563EB;
  --fp-pill-text: #1E293B;
  --fp-pill-detractor-text: #B3261E;
}

/*
 * 3. Midnight — dark surface. The line color #EF5350 is picked for the
 * dark surface (a lighter pastel red fails legibility checks there),
 * and the dot outline ring matches the background.
 */
.fp-theme-midnight {
  color-scheme: dark;
  --fp-line: #EF5350;
  --fp-band-detractor: #3B2422;
  --fp-band-passive: #26241F;
  --fp-band-promoter: #32302B;
  --fp-band-label: #C9C5C1;
  --fp-nonresponse: #8A8580;
  --fp-axis: #A8A29E;
  --fp-tick: #78716C;
  --fp-grid: #3A3835;
  --fp-zero: #78716C;
  --fp-contact-line: #57534E;
  --fp-contact-dot: #6B6660;
  --fp-score-text: #E7E5E4;
  --fp-dot-stroke: #1C1917;
  --fp-hover-line: #D6D3D1;
  --fp-bg: #1C1917;
  --fp-text: #E7E5E4;
  --fp-muted: #A8A29E;
  --fp-subtle: #C9C5C1;
  --fp-border: #44403C;
  --fp-border-soft: #3A3835;
  --fp-row-line: #2C2A27;
  --fp-row-hover: #292524;
  --fp-control-bg: #292524;
  --fp-control-text: #D6D3D1;
  --fp-tip-bg: #292524;
  --fp-tip-border: #44403C;
  --fp-link: #7DB0F5;
  --fp-pill-text: #E7E5E4;
  --fp-pill-detractor-text: #F4B3B0;
}