/* ==========================================================================
   theme.css — the single source of the brand palette. Loaded last.

   The logo is red #EE1C25, but the site was built on #D62828, a duller red
   that sat visibly apart from it. The brand red is now #E01B22: visually
   the logo's red, but dark enough for white text to pass WCAG AA (4.8:1;
   the logo's own red is 4.4:1). Four different greens and three light
   oranges have been folded into one each.

   Change a colour here and the whole storefront follows.
   ========================================================================== */

:root {
  /* Brand */
  --red:          #E01B22;
  --red-dark:     #B8121A;
  --red-tint:     rgba(224, 27, 34, .08);
  --orange:       #F77F00;
  --orange-dark:  #E56600;
  --orange-light: #FF9A3C;
  --brand-gradient: linear-gradient(135deg, #E01B22 0%, #F77F00 100%);

  /* Ink & surfaces */
  --dark:         #0D0D0D;
  --ink:          #141414;
  --ink-2:        #4B4B4B;
  --ink-3:        #8A8A8A;
  --surface:      #FFFFFF;
  --surface-2:    #F6F6F6;
  --line:         #ECECEC;

  /* States */
  --success:      #0B8A45;
  --success-tint: rgba(11, 138, 69, .1);
  --warning:      #E0A100;
  --danger:       #C8161D;

  /* Layer tokens used by pro.css and pages.css follow the brand ones. */
  --pro-ok:  var(--success);
  --pg-red:  var(--red);
  --pg-orange: var(--orange);
  --pg-grad: var(--brand-gradient);
  --pg-dark: radial-gradient(circle at 80% 30%, rgba(224, 27, 34, .32) 0%, rgba(224, 27, 34, 0) 55%),
             linear-gradient(135deg, #0A0A0A 0%, #151515 45%, #2A0C0E 100%);
}

/* Selection and focus in the brand colour. */
::selection { background: rgba(224, 27, 34, .18); }
:focus-visible { outline-color: var(--red); }

/* Prices, links and highlights that hard-coded the old red. */
.product-card .price, .product-card .product-price { color: var(--red); }
a { accent-color: var(--red); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--red); }