/* =======================================================================
   Spin Doctor / Appliance Academy — colour palette
   Lifted from the live Appliance Academy build, Oct 2026.
   Drop this in, then use the variables instead of raw hex codes.
   ======================================================================= */
:root{

  
/* =======================================================================
   WORKSMART ON THE SPIN DOCTOR PALETTE (v1782, 12/10/2026, as Scott set it:
   "please use these colours for the palette of the website"). The tokens
   above are the ones Scott gave, word for word. Every page's own colour
   names - the --ink, --orange, --line that the pages were built with - are
   bridged onto them here, and this sheet is linked LAST on every page, so
   the page's inline values give way to these. The dashboards' slate greys
   and the side navigation's navy are mapped onto the palette the same way.
   ======================================================================= */
:root{
  --ink:var(--sd-ink); --ink-soft:var(--sd-ink-2); --soft:var(--sd-ink-2); --muted:var(--sd-ink-3);
  --line:var(--sd-line); --rule:var(--sd-line); --line-2:var(--sd-line-2);
  --page:var(--sd-bg); --bg:var(--sd-bg); --paper:var(--sd-panel); --card:var(--sd-panel); --tile:var(--sd-panel-alt);
  --orange:var(--sd-accent); --orange-deep:var(--sd-accent-deep); --orange-pale:var(--sd-accent-tint);
  --amber:var(--sd-cat-elec); --amber-pale:var(--sd-cat-elec-soft); --amber-bg:var(--sd-cat-elec-soft);
  --mauve:var(--sd-nav); --charcoal:var(--sd-charcoal); --charcoal-deep:var(--sd-nav-deep);
  --blue:var(--sd-blue); --blue-deep:var(--sd-cat-method-deep); --blue-pale:var(--sd-blue-tint);
  --red:var(--sd-red); --red-bg:var(--sd-red-tint); --green:var(--sd-green); --green-pale:var(--sd-green-tint); --green-bg:var(--sd-green-tint);
  --side-bg:var(--sd-nav); --side-orange:var(--sd-accent);
  --field-bg:var(--sd-panel);
}
/* ---- Brand ---- */
  --sd-accent:         #E85B34;  /* Spin orange — Primary buttons, links, active states, icons, the 3px line under the nav bar */
  --sd-accent-deep:    #C9481F;  /* Spin orange deep — Hover and pressed state for orange, and the darker end of orange gradients */
  --sd-accent-tint:    #FBEFEA;  /* Orange tint — Soft orange background — RSP price panel, highlighted rows */
  --sd-accent-light:   #F2A184;  /* Orange light — Orange on a dark background (icons inside the nav dropdown) */
  --sd-nav:            #535166;  /* Nav mauve — The nav bar background */
  --sd-nav-deep:       #3E3A41;  /* Nav mauve deep — Darker mauve — gradient partner, footers */

  /* ---- Neutrals ---- */
  --sd-bg:             #F4F3F5;  /* Page — Page background behind every card */
  --sd-panel:          #FFFFFF;  /* Panel — Cards, bars, inputs, anything raised off the page */
  --sd-panel-alt:      #FAFAFB;  /* Panel tint — Alternate rows, inset wells */
  --sd-ink:            #26242A;  /* Ink — Headings and primary text */
  --sd-ink-2:          #565259;  /* Ink soft — Body copy */
  --sd-ink-3:          #8E8A93;  /* Ink muted — Labels, counts, captions, placeholder text */
  --sd-line:           #E5E3E7;  /* Line — Card borders and dividers */
  --sd-line-2:         #DBD8DE;  /* Line strong — Chip and input borders, hover borders */
  --sd-charcoal:       #3E3A41;  /* Charcoal — Dark panel headers (gradient with Ink) */

  /* ---- Status ---- */
  --sd-green:          #1E7B4F;  /* Green — In stock, pass, confirmed, saved */
  --sd-green-deep:     #155C3B;  /* Green deep — Green text on a green tint */
  --sd-green-tint:     #E7F3EC;  /* Green tint — Background for a positive message */
  --sd-red:            #B23A2E;  /* Red — Fail, error, out of stock, destructive */
  --sd-red-deep:       #8C2B21;  /* Red deep — Red text on a red tint */
  --sd-red-tint:       #FBE9E7;  /* Red tint — Background for a warning or failure */
  --sd-blue:           #5683B8;  /* Blue — Informational links — the website address in the top strip */
  --sd-blue-tint:      #E4ECF5;  /* Blue tint — Background for an informational note */

  /* ---- Categories ---- */
  --sd-cat-fill:       #2E7BC4;  /* Fill — Water in — fill valves, levels, pressure */
  --sd-cat-fill-deep:  #1F6F9C;  /* gradient dark end */
  --sd-cat-fill-soft:  #E4ECF5;  /* soft label tint */
  --sd-cat-drain:      #17867E;  /* Drainage — Water out — pumps, filters, leaks */
  --sd-cat-drain-deep: #0F6259;  /* gradient dark end */
  --sd-cat-drain-soft: #E3F1F0;  /* soft label tint */
  --sd-cat-heat:       #E85B34;  /* Heat — Elements, NTCs, drying, temperature */
  --sd-cat-heat-deep:  #C9481F;  /* gradient dark end */
  --sd-cat-heat-soft:  #FBEFEA;  /* soft label tint */
  --sd-cat-elec:       #C68A0D;  /* Electrical — Boards, wiring, connectors, supply */
  --sd-cat-elec-deep:  #96660A;  /* gradient dark end */
  --sd-cat-elec-soft:  #FAF0DA;  /* soft label tint */
  --sd-cat-door:       #2E9E6A;  /* Door — Doors, locks, interlocks, hinges */
  --sd-cat-door-deep:  #1E7B4F;  /* gradient dark end */
  --sd-cat-door-soft:  #E4F2EA;  /* soft label tint */
  --sd-cat-motor:      #6E6B80;  /* Motor — Motors, drums, bearings, brushes */
  --sd-cat-motor-deep: #4A485E;  /* gradient dark end */
  --sd-cat-motor-soft: #ECEAF2;  /* soft label tint */
  --sd-cat-cool:       #2E9FB4;  /* Cooling — Refrigeration, defrost, compressors */
  --sd-cat-cool-deep:  #1C7489;  /* gradient dark end */
  --sd-cat-cool-soft:  #E2F1F4;  /* soft label tint */
  --sd-cat-safety:     #D0483A;  /* Safety — Safety warnings */
  --sd-cat-safety-deep: #A82F23;  /* gradient dark end */
  --sd-cat-safety-soft: #FBE9E7;  /* soft label tint */
  --sd-cat-method:     #4E7AA8;  /* Method — Diagnostic approach and working practice */
  --sd-cat-method-deep: #3F6491;  /* gradient dark end */
  --sd-cat-method-soft: #E4ECF5;  /* soft label tint */
  --sd-cat-brand:      #535166;  /* Brand — Brand-specific quirks */
  --sd-cat-brand-deep: #3E3A41;  /* gradient dark end */
  --sd-cat-brand-soft: #ECEAEF;  /* soft label tint */

  /* ---- type ---- */
  --sd-font-head:   'Playfair Display', Georgia, serif;   /* page headings */
  --sd-font-ui:     'Barlow', system-ui, sans-serif;      /* nav, buttons, labels */
  --sd-font-cond:   'Barlow Condensed', sans-serif;       /* fault codes, card titles, big numbers */
  --sd-font-body:   'DM Sans', system-ui, sans-serif;     /* body copy */

  /* ---- shape ---- */
  --sd-radius:      14px;   /* cards */
  --sd-radius-lg:   18px;   /* panels and headers */
  --sd-radius-pill: 99px;   /* chips and pills */
  --sd-shadow:      0 1px 2px rgba(38,36,42,.05), 0 5px 16px rgba(38,36,42,.05);
  --sd-shadow-hi:   0 3px 6px rgba(38,36,42,.08), 0 14px 28px rgba(38,36,42,.10);
}

/* -----------------------------------------------------------------------
   Recipes — how the site actually combines them
   ----------------------------------------------------------------------- */

/* a card */
.sd-card{
  background:var(--sd-panel); border:1px solid var(--sd-line);
  border-radius:var(--sd-radius); box-shadow:var(--sd-shadow);
}
.sd-card:hover{ border-color:var(--sd-line-2); box-shadow:var(--sd-shadow-hi); transform:translateY(-2px); }

/* primary button */
.sd-btn{
  background:var(--sd-accent); color:#fff; border:0; border-radius:var(--sd-radius-pill);
  font-family:var(--sd-font-ui); font-weight:700; padding:10px 20px; cursor:pointer;
}
.sd-btn:hover{ background:var(--sd-accent-deep); }

/* dark panel header — used at the top of every section */
.sd-head{
  background:linear-gradient(135deg, var(--sd-ink) 0%, var(--sd-charcoal) 100%);
  color:#fff; border-radius:var(--sd-radius-lg);
}

/* category band — swap fill for drain, heat, elec, door, motor, cool... */
.sd-band{
  background:linear-gradient(135deg, var(--sd-cat-fill), var(--sd-cat-fill-deep));
  color:#fff;
}
/* and its matching label */
.sd-tag{ color:var(--sd-cat-fill-deep); background:var(--sd-cat-fill-soft); border-radius:var(--sd-radius-pill); }