/* ============================================================
   theme.css — Blooms & Petals Florist (Waterford city)
   A per-CLIENT re-skin of the Percolator framework. This file
   ONLY overrides design tokens — no component CSS is touched.
   Load order: tokens.css (defaults) → theme.css → base/components
   → site.css. Change the tokens, the whole system follows.
   ============================================================ */

:root {
  /* ---- Colour — "earth & petal" --------------------------
     Soft sage greens, warm earth tones, with a blooming
     rose accent. Sage does the legible work (links, buttons,
     icons). Rose is decorative ONLY — see note on --brand-bloom
     below. */
  --color-bg:           #F7F9F5;   /* soft cream */
  --color-surface:      #FFFFFF;   /* clean white cards */
  --color-surface-2:    #F0F4EC;   /* soft sage wash */
  --color-text:         #2D3A32;   /* deep forest green */
  --color-text-muted:   #62736A;   /* muted sage grey — clears AA on --color-bg AND --color-surface */
  --color-brand:        #5E8C61;   /* deep sage — primary buttons & links */
  --color-brand-hover:  #4A724D;
  --color-border:       #7a897b;   /* 3.37:1 min on all backgrounds - AA */
  --color-success:      #4CAF50;
  --color-warn:         #D29922;
  --color-danger:       #B85A5A;
  
  /* Button text colors - AA compliant on light backgrounds */
  --color-brand-text:   #000000;   /* 5.64:1 on brand (#5E8C61) - AA */
  --color-danger-text:  #000000;   /* 4.85:1 on danger (#B85A5A) - AA */
  --color-overlay:      rgba(45, 58, 50, 0.55);

  /* Bespoke tokens for this brand (the bloom) */
  --brand-bloom:        #E8A87C;   /* warm peach — DECORATIVE ONLY: never use for text, links or icons on light backgrounds (2.03:1 contrast on white). Safe uses: SVG art, large fills, backgrounds behind dark text. */
  --brand-bloom-soft:   #F5D5C8;   /* soft peach — decorative */
  --brand-bloom-deep:   #C77B5B;   /* deeper peach — use THIS for small text or icons where peach is needed (clears AA on white) */
  --brand-earth:         #8B6F47;   /* warm brown */
  --brand-leaf:         #A8C686;   /* soft leaf green */

  /* ---- Typography — Playfair Display (display) + Lora (body) ---
     Both serifs: deliberate choice to create warm, romantic,
     editorial mood fitting a florist. Contrast is maintained
     via weight (Playfair 600-700 headings, Lora 400 body) and
     leading (tight for display, generous for body). */
  --font-sans:    "Lora", Georgia, "Times New Roman", serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  /* ---- Softer, more organic surfaces -------------------------- */
  --radius-md:   14px;
  --radius-lg:   28px;
  --shadow-sm:   0 1px 2px rgba(45,58,50,0.06);
  --shadow-md:   0 18px 44px rgba(94,140,97,0.12);

  --max-width-content: 78rem;
}

/* ============================================================
   BUTTON CONTRAST FIXES FOR AA COMPLIANCE
   Light background requires dark text on colored buttons.
   ============================================================ */

/* Use black text on brand buttons for AA compliance */
.btn--primary {
  background: var(--color-brand);
  color: var(--color-brand-text);
}
.btn--primary:hover {
  /* Lighten the brand color for hover to maintain contrast with black text */
  background: #71a874; /* +20% lighter, 7.90:1 with black - AA */
  color: var(--color-brand-text);
}

/* Use black text on danger buttons for AA compliance */
.btn--danger {
  background: var(--color-danger);
  color: var(--color-danger-text);
}
.btn--danger:hover {
  /* Lighten the danger color for hover to maintain contrast with black text */
  background: #c37373; /* color-mix(#B85A5A, #fff, 15%), 6.36:1 with black - AA */
  color: var(--color-danger-text);
}