/* ============================================================
   Easy Paints — Design Tokens
   Aesthetic: Lifestyle editorial · Warm minimalist
   Brand: Easy Paints, Karen, Nairobi (Kenya & East Africa)
   Logo squares (kept as accent palette): blue, purple, yellow
   ============================================================ */

:root {
  /* ---- Brand / CTA ---- */
  --primary:        #C4622D;   /* terracotta — primary CTA + accents */
  --primary-dark:   #A85126;   /* hover */
  --primary-soft:   #F4E2D4;   /* warm cream variant of terracotta */

  /* ---- Logo accents (used sparingly) ---- */
  --accent-blue:    #1E5C9C;   /* EASY logo blue */
  --accent-purple:  #6B3FA0;   /* EASY logo purple */
  --accent-yellow:  #F5A623;   /* EASY logo yellow */
  --accent-gold:    #C8963E;   /* harvest gold — premium badges, ratings */
  --accent-sage:    #5C6B4A;   /* olive sage — eco / nature product accents */

  /* ---- Surfaces ---- */
  --bg-main:    #FBF5EE;   /* warm cream (NOT pure white) */
  --bg-alt:     #F0E8DC;   /* linen — section alternation, card backgrounds */
  --bg-deep:    #1C0F0A;   /* deep mocha for dark sections */

  /* ---- Text ---- */
  --text-heading: #1C0F0A;   /* deep mocha */
  --text-body:    #6E5F53;   /* warm stone */
  --text-muted:   #8C7B6D;   /* lighter warm stone */
  --text-on-dark: #FBF5EE;   /* reverse for dark sections */

  /* ---- Lines ---- */
  --border:        rgba(28, 15, 10, 0.12);   /* warm hairline border */
  --border-strong: rgba(28, 15, 10, 0.22);

  /* ---- Footer ---- */
  --footer-bg:   #1C0F0A;    /* deep mocha */
  --footer-text: rgba(251, 245, 238, 0.7);
  --footer-line: rgba(251, 245, 238, 0.12);

  /* ---- Feedback ---- */
  --success: #5C6B4A;   /* sage instead of generic green */
  --error:   #B5341B;   /* rust-red */
  --warning: #C8963E;   /* gold */

  /* ---- Typography ---- */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  /* legacy alias so older selectors keep working */
  --font-heading: var(--font-display);

  /* ---- Layout (8px grid · full-width, comfortable side padding) ---- */
  --container-max: 100%;
  --container-pad: 40px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-pill: 999px;

  /* ---- Shadows (warm-tinted, not flat black) ---- */
  --shadow-1: 0 2px 6px rgba(28, 15, 10, 0.04);
  --shadow-2: 0 6px 24px rgba(28, 15, 10, 0.08);
  --shadow-3: 0 16px 48px rgba(28, 15, 10, 0.12);

  /* ---- Motion (150-300ms ease-out only) ---- */
  --t-fast: 150ms ease-out;
  --t-base: 220ms ease-out;
  --t-slow: 380ms cubic-bezier(.2, .7, .2, 1);

  /* ---- Header heights ---- */
  --utility-h: 36px;
  --header-h:  76px;
}

@media (min-width: 1440px) { :root { --container-pad: 72px; } }
@media (min-width: 1920px) { :root { --container-pad: 112px; } }
@media (min-width: 2560px) { :root { --container-pad: 160px; } }
@media (max-width: 767px) {
  :root {
    --container-pad: 20px;
    --header-h: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}