/* ============================================================================
   AI CLAUDE SEARCH — THEME FILE   (edit me!)
   ----------------------------------------------------------------------------
   THIS IS THE ONE FILE YOU EDIT TO CHANGE THE LOOK & FEEL.

   How to use it (no module re-install needed):
     1. Download this file over FTP/SFTP:
        /modules/aiclaudesearch/views/css/acs-theme.css
     2. Change any of the values below (colours, fonts, sizes, radius).
     3. Re-upload it over the top.
     4. Refresh the shop. That's it — the search restyles itself.

   Everything visual reads from these CSS custom properties. You do NOT need to
   touch acs-suggest.css or any JavaScript. If you want deeper structural
   tweaks, put them in acs-custom.css (loaded last, never overwritten on update).
   ========================================================================== */

:root{

  /* ---- BRAND ACCENT ------------------------------------------------------ */
  /* Primary accent used for buttons, the "Popular" badge, highlight.
     NOTE: for per-site colours that survive module updates, set the colour
     fields in the module's back-office config instead of editing this file. */
  --acs-accent:        #e8640c;   /* orange (default) */
  --acs-accent-deep:   #c9540a;   /* darker accent, used on hover */

  /* ---- ARROWS ------------------------------------------------------------ */
  /* The little arrow circles (price pill, category rows, View product).
     Defaults to the accent; override here or via the config's Arrow Colour. */
  --acs-arrow:         var(--acs-accent);

  /* ---- INK / TEXT -------------------------------------------------------- */
  --acs-ink:           #1a2e4a;   /* main text + product titles (navy)       */
  --acs-ink-soft:      #3e5557;   /* secondary text                          */
  --acs-ink-mute:      #718096;   /* small labels, counts, SKUs              */

  /* ---- SURFACES / LINES -------------------------------------------------- */
  --acs-panel-bg:      #ffffff;   /* dropdown background                      */
  --acs-cream:         #f7fafa;   /* left category column + footer background */
  --acs-line:          #e2e8f0;   /* borders                                 */
  --acs-line-2:        #eaf3f3;   /* softer inner divider                     */
  --acs-price-bg:      #1a2e4a;   /* the price pill background (navy)         */

  /* ---- SHAPE ------------------------------------------------------------- */
  --acs-radius-panel:  18px;      /* dropdown corner radius                   */
  --acs-radius-card:   13px;      /* product card corner radius               */
  --acs-radius-pill:   100px;     /* buttons / badges                         */

  /* ---- TYPE -------------------------------------------------------------- */
  /* Headings & small-caps labels. Body text inherits your shop's font.       */
  --acs-font-head:     'Archivo', 'Outfit', system-ui, sans-serif;
  --acs-font-body:     inherit;

  /* ---- SHADOW ------------------------------------------------------------ */
  --acs-shadow:        0 30px 70px rgba(0,10,10,.28);

  /* ----------------------------------------------------------------------- */
  /* The variables below keep the LEGACY (v4) results page + chat looking     */
  /* consistent with the accent above. Change them too if you use that view.  */
  /* ----------------------------------------------------------------------- */
  --navy:   var(--acs-ink);
  --teal:   var(--acs-accent);
  --orange: #e8640c;
  --red:    #e8392a;
  --text:   var(--acs-ink);
  --text-m: var(--acs-ink-soft);
  --text-l: var(--acs-ink-mute);
  --text-ll:#a0aec0;
  --border: var(--acs-line);
  --bg:     #f4f5f7;
  --white:  #ffffff;
}