/* ============================================================================
   ecoPi design tokens
   Single source of truth for colour, type, spacing, radius, shadow and motion.
   Aligned to the ecoPi Live dashboard so both properties read as one product.

   Every colour pair used for text is verified against WCAG 2.1 AA; the ratio
   is noted next to each value. Do not introduce new hex values in component
   CSS — add a token here instead.
   ========================================================================= */

:root {
  /* ---- Surfaces ------------------------------------------------------- */
  --ep-bg-page:            #F4F7F9;  /* soft cool grey, default page background */
  --ep-bg-alt:             #E8EFF3;  /* alternate band, gives section rhythm    */
  --ep-bg-card:            #FFFFFF;  /* cards, panels, content surfaces         */
  --ep-bg-raised:          #FFFFFF;  /* lifted cards (pair with --ep-shadow-md) */
  --ep-bg-faint:           #E4F3F6;  /* teal-tinted highlight (dashboard value) */
  --ep-bg-inverse:         #12414D;  /* dark teal statement band                */

  /* ---- Borders -------------------------------------------------------- */
  --ep-border:             #DBE3E9;
  --ep-border-strong:      #C3CFD8;
  --ep-border-inverse:     rgba(255, 255, 255, 0.16);

  /* ---- Text ----------------------------------------------------------- */
  --ep-text:               #0E2A32;  /* 15.04:1 on card, 13.98:1 on page */
  --ep-text-secondary:     #3D5C66;  /*  7.19:1 on card                  */
  --ep-text-muted:         #54707A;  /*  5.28:1 on card                  */
  --ep-text-inverse:       #FFFFFF;  /* 11.12:1 on inverse               */
  --ep-text-inverse-muted: #C9DDE3;  /*  7.91:1 on inverse               */

  /* ---- Brand ---------------------------------------------------------- */
  --ep-primary:            #216778;  /*  6.41:1 on card — dashboard primary */
  --ep-primary-hover:      #1B5563;  /*  8.31:1 on card                     */
  --ep-primary-active:     #174F5C;
  --ep-primary-light:      #7AC1D1;  /* accents on dark surfaces only       */
  --ep-primary-faint:      #E4F3F6;
  --ep-brand-logo:         #84CBDB;

  /* ---- Step sequence ----------------------------------------------------
     A soft light-to-dark teal progression for numbered step sequences
     (e.g. the /workflow.html journey), so "this is a sequence" reads through
     colour without leaving the brand's teal family. White text stays above
     4.5:1 on every stop. */
  --ep-step-1:             #12414D;  /* 11.12:1 on white text */
  --ep-step-2:             #164D5B;  /*  9.34:1 on white text */
  --ep-step-3:             #1B5968;  /*  7.85:1 on white text */
  --ep-step-4:             #1F6476;  /*  6.68:1 on white text */
  --ep-step-5:             #247083;  /*  5.64:1 on white text */
  --ep-step-6:             #287C91;  /*  4.79:1 on white text */

  /* ---- Accent ---------------------------------------------------------
     One restrained accent for editorial emphasis (eyebrows, underlines,
     secondary buttons). Never used to signal status. */
  --ep-accent:             #2E6F4E;  /*  6.00:1 on card */
  --ep-accent-hover:       #245B3F;
  --ep-accent-faint:       #E7F1EB;

  /* ---- Status ---------------------------------------------------------
     Dashboard values for fills/indicators; the *-text variants are the
     AA-safe versions for text on white. Never used decoratively. */
  --ep-success:            #27AE60;
  --ep-success-text:       #1F7A47;  /*  5.34:1 on card */
  --ep-warning:            #E8A200;
  --ep-warning-text:       #8A5A00;  /*  5.93:1 on card */
  --ep-danger:             #DC3545;
  --ep-danger-text:        #C0392B;  /*  5.44:1 on card */

  /* ---- Typography ------------------------------------------------------ */
  --ep-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ep-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ep-text-xs:   0.8125rem;
  --ep-text-sm:   0.875rem;
  --ep-text-base: 1rem;
  --ep-text-lg:   clamp(1.0625rem, 0.4vw + 0.97rem, 1.1875rem);
  --ep-h4:        clamp(1.125rem, 0.5vw + 1rem,    1.3125rem);
  --ep-h3:        clamp(1.375rem, 0.9vw + 1.15rem, 1.75rem);
  --ep-h2:        clamp(1.75rem,  2.2vw + 1.2rem,  2.75rem);
  --ep-h1:        clamp(2.25rem,  4vw   + 1.25rem, 4rem);

  --ep-leading-tight: 1.15;
  --ep-leading-snug:  1.3;
  --ep-leading-body:  1.65;

  --ep-measure:      68ch;  /* body copy               */
  --ep-measure-lead: 56ch;  /* lead paragraphs         */
  --ep-measure-head: 20ch;  /* display headings        */

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --ep-space-1: 0.25rem;
  --ep-space-2: 0.5rem;
  --ep-space-3: 0.75rem;
  --ep-space-4: 1rem;
  --ep-space-5: 1.5rem;
  --ep-space-6: 2rem;
  --ep-space-7: 3rem;
  --ep-space-8: 4rem;
  --ep-space-9: 6rem;

  --ep-section-y: clamp(3rem, 7vw, 6.5rem);
  --ep-gutter:    clamp(1rem, 3vw, 2rem);
  --ep-container: 1280px;

  /* ---- Radius ---------------------------------------------------------- */
  --ep-radius-sm:   0.375rem;
  --ep-radius-md:   0.625rem;
  --ep-radius-lg:   1rem;
  --ep-radius-xl:   1.5rem;
  --ep-radius-pill: 999px;

  /* ---- Shadow ---------------------------------------------------------- */
  --ep-shadow-sm: 0 1px 2px rgba(14, 42, 50, 0.06);
  --ep-shadow-md: 0 4px 16px rgba(14, 42, 50, 0.08);
  --ep-shadow-lg: 0 12px 40px rgba(14, 42, 50, 0.10);

  /* ---- Motion ---------------------------------------------------------- */
  --ep-duration-fast: 120ms;
  --ep-duration-base: 200ms;
  --ep-duration-slow: 400ms;
  --ep-ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Layout ---------------------------------------------------------- */
  --ep-nav-h: 72px;  /* fixed header height; drives content offset */
}