/* =====================================================================
   Liquidation Flips — Storefront shared theme
   Single source of truth for the brand font + colour tokens.

   Linked from every storefront page BEFORE its own inline <style>, so a
   page can still override a token for a page-specific need, but by default
   every page inherits the same palette and typeface. This exists so the
   brand green + font live in ONE place instead of being copy-pasted as raw
   hex into each page. New pages should reference the var(--…) tokens below
   rather than re-declaring literals.
   ===================================================================== */

/* Brand font. Imported here so a page only needs the single theme.css link
   to pick up Hanken Grotesk — no separate <link> per page required.
   (Pages that also load it via <link> are fine; the browser dedupes.) */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&display=swap');

:root{
  /* Brand */
  --brand:      #1f8b57;   /* primary green */
  --brand-2:    #177045;   /* hover / pressed green */
  --brand-soft: rgba(31,139,87,.12);
  --accent:     #1f8b57;   /* alias: some pages use --accent for the green */

  /* Ink / text */
  --ink:    #16202e;       /* primary text / dark surfaces */
  --text:   #16202e;       /* alias used by several pages */
  --muted:  #6b7480;       /* secondary text (4.75:1 on white — AA) */
  --muted2: #6e7681;       /* tertiary text (4.66:1 on white — AA). Was #97a0ab
                              (2.66:1) which failed WCAG AA for small text. */

  /* Lines & surfaces */
  --line:   #e6e8ec;       /* hairline borders */
  --line2:  #eef0f2;       /* faint dividers */
  --border: #e5e7eb;       /* alias used by several pages */
  --panel:  #ffffff;       /* card surface */

  /* Status */
  --success: #16a34a;
  --danger:  #c0453f;
  --warn:    #f59e0b;

  --radius:  16px;
  --shadow:  0 16px 40px rgba(15,23,42,.07);

  --font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Brand typeface as the document default.
   The `html body` selector (specificity 0,0,2) deliberately outranks any page's
   own `body{…}` or `html,body{…}` rule (0,0,1), so pages that previously fell
   back to `system-ui` now render in the brand font WITHOUT needing per-page
   edits. Elements using `font-family:inherit` (buttons, inputs) inherit this. */
html body{ font-family: var(--font); }

/* =====================================================================
   Global accessibility baselines (added site-wide via theme.css so every
   page that links this sheet inherits them without per-page edits).
   ===================================================================== */

/* Keyboard focus ring. Most custom buttons/cards/tabs strip the browser's
   default outline; this restores a visible, on-brand focus indicator for
   keyboard + screen-reader users. :focus-visible only shows it for keyboard
   navigation (not mouse clicks), so it never appears on pointer users.
   -2px offset + a soft halo keeps it readable on any surface. */
:focus-visible{
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Inputs/selects already show a green focus glow; keep the ring tight there. */
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline-offset: 0;
}

/* Respect the OS "reduce motion" setting. Carousels, drawer slide-ins, card
   hover lifts and countdown pulses all animate; users with vestibular
   sensitivity ask the OS to minimise this. Near-instant (not fully 0s, so
   state changes are still perceivable) transitions/animations for them. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}