/* ============================================================
   FONTS — Poppins + Merriweather (article body), self-hosted
   Source: docs/design-system.html (single source of truth)
   ============================================================ */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Poppins-Regular.7e07b84e40ee.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Poppins-Medium.0d4c19bfa17f.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Poppins-SemiBold.8b9204cdf887.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Poppins-Bold.1799809f98bf.woff2") format('woff2');
}
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Merriweather-Regular.11f09854bf0a.woff2") format('woff2');
}
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Merriweather-Bold.95bd343ca168.woff2") format('woff2');
}
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Merriweather-Italic.13d879d9e635.woff2") format('woff2');
}

/* ============================================================
   CSS CUSTOM PROPERTIES — single source of truth
   Mirrors docs/design-system.html :root block.
   ============================================================ */
:root {
  /* Brand colours */
  --color-primary:        #1E5C35;
  --color-primary-dark:   #163F25;
  --color-primary-light:  #2D7A4A;
  --color-accent:         #C8860A;
  --color-accent-dark:    #A06A06;
  --color-accent-light:   #FDF6E8;
  --color-accent-border:  #F0D080;

  /* Buttons */
  --color-btn-primary-bg:    #1E5C35;
  --color-btn-primary-text:  #FFFFFF;
  --color-btn-primary-hover: #163F25;

  /* Neutrals */
  --color-bg-page:        #FAFAF7;
  --color-bg-surface:     #FFFFFF;
  --color-bg-subtle:      #F2F5F1;
  --color-border:         #D8E2D9;
  --color-border-strong:  #B4C8B8;

  /* Text */
  --color-text-primary:   #1A3A26;
  --color-text-secondary: #4A6B54;
  --color-text-hint:      #7A9B82;
  --color-text-inverse:   #FFFFFF;

  /* Semantic */
  --color-success:        #2D7A4A;
  --color-success-bg:     #E8F5EC;
  --color-success-text:   #1A3A26;
  --color-error:          #B91C1C;
  --color-error-bg:       #FEF2F2;
  --color-error-border:   #FECACA;
  --color-error-text:     #7F1D1D;
  --color-warning:        #C8860A;
  --color-warning-bg:     #FDF6E8;
  --color-warning-text:   #6B3900;
  --color-info:           #1E5C35;

  /* Price / highlight */
  --color-price:          #1E5C35;

  /* Badges (product card) */
  --color-badge-new-bg:    #E8F5EC;

  /* Order status badges (design-system §9) */
  --color-status-pending-bg:    #FDF6E8;
  --color-status-pending-text:  #A06A06;
  --color-status-paid-bg:       #DBEAFE;
  --color-status-paid-text:     #1E40AF;
  --color-status-shipped-bg:    #DCFCE7;
  --color-status-shipped-text:  #166534;
  --color-status-delivered-bg:  #E5E7EB;
  --color-status-delivered-text:#374151;
  --color-status-cancelled-bg:  #FEE2E2;
  --color-status-cancelled-text:#991B1B;

  /* Typography */
  --font-primary: 'Poppins', sans-serif;
  --font-article: 'Merriweather', Georgia, serif;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  /* Spacing (8px base unit) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Layout */
  --container-max: 1200px;
  --container-pad: 1.5rem;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  line-height: 1.6;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.page-messages {
  margin-top: var(--space-6);
}