/*
 * Delsenter design system token file: colors.css
 *
 * SOURCE: design_handoff_delsenter_woocommerce/design-system/tokens/colors.css
 * COPIED VERBATIM — DO NOT EDIT THIS FILE.
 * Fixes and additions go upstream to the design system, then get re-copied here.
 */
:root{
  /* Brand blue — --blue-600 (#007fcd) is sampled from the Delsenter logo */
  --blue-50:#eef8ff;
  --blue-100:#d8eefd;
  --blue-200:#b2ddfa;
  --blue-300:#7fc6f4;
  --blue-400:#42a9ea;
  --blue-500:#1791dc;
  --blue-600:#007fcd;
  --blue-700:#0067a8;
  --blue-800:#065488;
  --blue-900:#0a4670;
  --blue-950:#072c48;

  /*
   * Neutrals — cool, blue-leaning greys.
   *
   * --neutral-550 is the lightest grey allowed to carry text: 5.4:1 on
   * --neutral-0 and 5.1:1 on --surface-page. --neutral-400 and --neutral-500
   * are NON-TEXT — borders, separators, decorative glyphs. --border-strong
   * keeps --neutral-400 and is right to: WCAG's 3:1 does not apply to a
   * hairline that is not the only means of identifying its control.
   */
  --neutral-0:#ffffff;
  --neutral-25:#fbfcfd;
  --neutral-50:#f6f8fa;
  --neutral-100:#eff2f6;
  --neutral-200:#e3e8ee;
  --neutral-300:#cdd5df;
  --neutral-400:#9ba6b4;
  --neutral-500:#6f7c8b;
  --neutral-550:#5f6b79;
  --neutral-600:#55606e;
  --neutral-700:#3e4753;
  --neutral-800:#2a313a;
  --neutral-900:#191e25;

  /* Semantic hues */
  --green-50:#e9f7f1;--green-500:#17a274;--green-600:#12805c;--green-700:#0d6146;
  --amber-50:#fdf4e7;--amber-500:#d98207;--amber-600:#b16200;--amber-700:#8a4c00;
  --red-50:#fdeded;--red-500:#e0353c;--red-600:#c8282f;--red-700:#a01d23;

  /* ── Semantic aliases ─────────────────────────────── */

  /*
   * --brand is the logo blue and stays the logo blue. It is only 4.27:1 on
   * --neutral-0, so it is NON-TEXT-BEARING: icons, accents, hairlines, active
   * indicators, the checked control fill. All of those are governed by WCAG's
   * 3:1 non-text threshold, which 4.27 clears.
   *
   * --brand-strong is the same brand one ramp step down, for any fill that
   * carries --brand-contrast text: 5.99:1, AA at every size. This is the same
   * split --text-brand already makes for brand-coloured text on a light
   * surface — a fill with text on it is that rule seen from the other side.
   *
   * Choosing between them: does something read on top of it? --brand-strong.
   * Otherwise --brand.
   */
  --brand:var(--blue-600);
  --brand-hover:var(--blue-700);
  --brand-active:var(--blue-800);
  --brand-strong:var(--blue-700);
  --brand-strong-hover:var(--blue-800);
  --brand-strong-active:var(--blue-900);
  --brand-subtle:var(--blue-50);
  --brand-subtle-hover:var(--blue-100);
  --brand-contrast:var(--neutral-0);

  --text-heading:var(--neutral-900);
  --text-body:var(--neutral-700);
  --text-muted:var(--neutral-600);
  --text-faint:var(--neutral-550);
  --text-brand:var(--blue-700);
  --text-inverse:var(--neutral-0);
  --text-price:var(--neutral-900);
  --text-price-sale:var(--red-600);
  --text-price-was:var(--neutral-550);

  --surface-page:var(--neutral-50);
  --surface-card:var(--neutral-0);
  --surface-raised:var(--neutral-0);
  --surface-sunken:var(--neutral-100);
  --surface-brand:var(--blue-700); /* a surface is text-bearing by definition — see --brand-strong */
  --surface-brand-soft:var(--blue-50);
  --surface-inverse:var(--neutral-900);
  --surface-overlay:rgba(25,30,37,.45);

  --border-subtle:var(--neutral-200);
  --border-default:var(--neutral-300);
  --border-strong:var(--neutral-400);
  --border-brand:var(--blue-600);
  --border-focus:var(--blue-400);

  --status-success:var(--green-600);--status-success-bg:var(--green-50);
  --status-warning:var(--amber-600);--status-warning-bg:var(--amber-50);
  --status-danger:var(--red-600);  --status-danger-bg:var(--red-50);
  --status-info:var(--blue-600);   --status-info-bg:var(--blue-50);

  --badge-sale:var(--red-600);
  --badge-new:var(--blue-700); /* carries --text-inverse — see --brand-strong */
  --badge-stock:var(--green-600);

  --focus-ring:0 0 0 3px rgba(0,127,205,.22);
}