/* ==========================================================================
   Swordis Assist — design tokens, SCOPED to the chat.

   Everything here applies only inside elements carrying .swordis-scope (the
   embed root, the floating launcher and the overlays the chat attaches to
   <body>). Nothing may target the page itself: this file once carried the
   prototype's site-wide resets (`*` box-sizing, body font, img/button/a/input
   resets) and storefront utility classes (.container, .row, .btn, .price…),
   and when the bubble went site-wide they restyled the whole store and broke
   the WooCommerce checkout. The chat itself only uses these variables plus
   its own sw-/swordis- classes, so nothing it needs was lost.
   ========================================================================== */

.swordis-scope {
  /* Base neutrals — warm dark-green so every "ink-900" button/border
     reads as the brand dark-green (matching the logo) instead of pure
     black. This is the single source of truth — every button, border,
     chip, filter CTA, etc. that uses var(--ink-900) picks this up. */
  --ink-900: #1a2d28;   /* darkest text / bg — brand dark green */
  --ink-800: #233a34;
  --ink-700: #223330;
  --ink-600: #4a5a57;
  --ink-500: #6b7a77;
  --ink-400: #98a19f;
  --ink-300: #c5ccca;
  --ink-200: #e4e7e6;
  --ink-150: #eef0ef;
  --ink-100: #f5f6f5;   /* card tint */
  --ink-50:  #ffffff;   /* page bg — pure white (non-negotiable) */
  /* Backdrop behind product photos. Most catalogue shots are cut out on pure
     white, which reads as a bright hole next to the card; the photo is blended
     onto this tint (see .sw-product-photo) so those whites become light grey
     while the sword itself is untouched. */
  --product-photo-bg: #eceeed;
  --white:   #ffffff;

  /* Brand — green-teal family from the Figma, tuned */
  --brand-900: #01231f;
  --brand-800: #0b2e29;
  --brand-700: #17433d;
  --brand-600: #2a5a53;
  --brand-500: #4d6562;
  --brand-400: #7f938f;
  --brand-300: #b3bdbc;

  /* Accent — orange, tuned down from pure FF3D00 */
  --accent-700: #c63200;
  --accent-600: #e03800;
  --accent-500: #f03d0d;   /* primary CTA */
  --accent-400: #ff5b2b;
  --accent-100: #fef0ea;   /* soft tint */
  --sel-red:    #b5302a;   /* selection accent in the builder */

  /* Status */
  --ok-600:   #0b8e6a;
  --ok-100:   #e6f4ef;
  --warn-600: #c07800;
  --err-600:  #c01414;
  --err-100:  #fbe9e9;
  /* True red for Save tags + discounted prices */
  --sale-500: #e11d1d;
  --sale-600: #c01414;

  /* Semantic */
  --bg-page:        #ffffff;
  --bg-surface:     var(--white);
  --bg-muted:       var(--ink-100);
  --bg-warm:        #efedea;     /* warm off-white band — brand sections, quiet dividers */
  --bg-dark:        var(--brand-900);
  --fg-primary:     var(--ink-900);
  --fg-secondary:   var(--ink-600);
  --fg-tertiary:    var(--ink-500);
  --fg-on-dark:     #f2f4f3;
  --fg-on-dark-mut: #9fb1ae;
  --border:         var(--ink-200);
  --border-strong:  var(--ink-300);
  --cta:            var(--accent-500);
  --cta-hover:      var(--accent-600);
  --cta-fg:         #fff;
  --price:          var(--accent-600);
  --link:           var(--brand-700);

  /* Type — Direction A: Instrument Sans + Inter */
  --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Type scale (1440 baseline) */
  --fs-12: 12px; --lh-12: 16px;
  --fs-13: 13px; --lh-13: 18px;
  --fs-14: 14px; --lh-14: 20px;
  --fs-15: 15px; --lh-15: 22px;
  --fs-16: 16px; --lh-16: 24px;
  --fs-18: 18px; --lh-18: 26px;
  --fs-20: 20px; --lh-20: 28px;
  --fs-24: 24px; --lh-24: 32px;
  --fs-28: 28px; --lh-28: 36px;
  --fs-32: 32px; --lh-32: 40px;
  --fs-40: 40px; --lh-40: 48px;
  --fs-56: 56px; --lh-56: 60px;

  /* Spacing — 4px base */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px;
  --sp-24: 96px; --sp-28: 112px;

  /* Radius */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(15,26,24,.06), 0 1px 1px rgba(15,26,24,.04);
  --sh-2: 0 2px 8px rgba(15,26,24,.06), 0 1px 2px rgba(15,26,24,.04);
  --sh-3: 0 8px 24px rgba(15,26,24,.08), 0 2px 6px rgba(15,26,24,.04);
  --sh-focus: 0 0 0 3px rgba(240,61,13,.25);

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* Layout */
  --max-w: 1300px;
  --gutter: 80px;
  --gutter-sm: 24px;

  /* Base text for the chat (was set on <body>). */
  font-family: var(--font-ui);
  font-size: var(--fs-15);
  line-height: var(--lh-15);
  color: var(--fg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Resets the chat was designed against — inside the chat only. */
.swordis-scope, .swordis-scope *, .swordis-scope *::before, .swordis-scope *::after { box-sizing: border-box; }
.swordis-scope img { display: block; max-width: 100%; }
.swordis-scope button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.swordis-scope a { color: inherit; text-decoration: none; }
.swordis-scope input, .swordis-scope select, .swordis-scope textarea { font: inherit; color: inherit; }