/* ============================================================================
   Key for Change — Design Tokens
   Strapline: "Unlocking Potential"

   Loaded AFTER quark2's theme.css (assets priority 85 < 90) so these values win.
   This file is the single source of truth for the brand palette, type scale,
   spacing scale and layout metrics used by every homepage component
   (nav / hero / body / footer). Reference tokens via var(--k4c-*) — never
   hard-code a hex or a pixel value in a component.
   ========================================================================== */

:root {
  /* ---- Brand palette (from keyforchange-brand-guide.md) ------------------ */
  --k4c-purple:        #512D7F;   /* primary — logo & dark backgrounds        */
  --k4c-purple-light:  #7960A0;   /* accent                                   */
  --k4c-yellow:        #FFC729;   /* accent / CTA                             */
  --k4c-red:           #CC0030;   /* bold accent                              */
  --k4c-grey:          #222222;   /* body text on light                       */
  --k4c-white:         #FFFFFF;   /* text / logo on dark                      */

  /* Derived tints & shades (kept in-family, for hovers / surfaces / borders) */
  --k4c-purple-dark:   #3D2260;   /* darker purple — footer, pressed states   */
  --k4c-purple-900:    #2C1748;   /* deepest purple                           */
  --k4c-purple-100:    #EBE5F2;   /* pale purple surface                      */
  --k4c-purple-50:     #F5F2FA;   /* faintest purple wash                     */
  --k4c-yellow-dark:   #E6AF00;   /* CTA hover                                */
  --k4c-red-dark:      #A30026;   /* red hover                                */
  --k4c-grey-800:      #333333;
  --k4c-grey-600:      #555555;   /* secondary text                           */
  --k4c-grey-400:      #8A8A8A;   /* muted / captions                         */
  --k4c-grey-200:      #D9D9D9;   /* borders / dividers                       */
  --k4c-grey-100:      #F2F2F2;   /* light section background                 */
  --k4c-black:         #111111;

  /* ---- Typography -------------------------------------------------------- */
  --k4c-font-heading:  'Montserrat', 'Segoe UI', Tahoma, Arial, sans-serif;   /* web repl. for Tisa Sans Pro */
  --k4c-font-body:     'Lato', 'Segoe UI', Tahoma, Arial, sans-serif;         /* web repl. for Tisa Sans     */

  /* Fluid type scale — 1.25 (major third) at desktop, gently clamped        */
  --k4c-fs-xs:    0.75rem;                              /* 12px — eyebrows/caps */
  --k4c-fs-sm:    0.875rem;                             /* 14px                 */
  --k4c-fs-base:  1rem;                                 /* 16px body            */
  --k4c-fs-md:    1.125rem;                             /* 18px lede            */
  --k4c-fs-lg:    clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --k4c-fs-xl:    clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --k4c-fs-2xl:   clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);
  --k4c-fs-3xl:   clamp(2.4rem, 1.8rem + 3vw, 3.75rem);
  --k4c-fs-hero:  clamp(2.75rem, 1.8rem + 4.6vw, 5rem); /* 100vh hero strapline */

  --k4c-fw-regular:   400;
  --k4c-fw-medium:    500;
  --k4c-fw-semibold:  600;
  --k4c-fw-bold:      700;
  --k4c-fw-extrabold: 800;

  --k4c-lh-tight:   1.1;    /* display headings          */
  --k4c-lh-heading: 1.25;   /* sub-headings              */
  --k4c-lh-body:    1.65;   /* body copy                 */

  --k4c-tracking-caps: 0.08em;   /* block-caps eyebrow tracking (brand: 0 or 100) */

  /* ---- Spacing scale (4px base) ----------------------------------------- */
  --k4c-space-0:   0;
  --k4c-space-1:   0.25rem;   /*  4px */
  --k4c-space-2:   0.5rem;    /*  8px */
  --k4c-space-3:   0.75rem;   /* 12px */
  --k4c-space-4:   1rem;      /* 16px */
  --k4c-space-5:   1.5rem;    /* 24px */
  --k4c-space-6:   2rem;      /* 32px */
  --k4c-space-7:   3rem;      /* 48px */
  --k4c-space-8:   4rem;      /* 64px */
  --k4c-space-9:   6rem;      /* 96px */
  --k4c-space-10:  8rem;      /* 128px */

  /* Vertical rhythm for full-width sections (body slot, footer) */
  --k4c-section-pad: clamp(3rem, 6vw, 6rem);

  /* ---- Layout ----------------------------------------------------------- */
  --k4c-container:      1200px;                    /* matches inherited .container */
  --k4c-container-wide: 1440px;
  --k4c-container-pad:  clamp(1rem, 4vw, 2rem);
  --k4c-nav-height:     4.5rem;                    /* 72px sticky nav          */

  /* ---- Radius / borders -------------------------------------------------- */
  --k4c-radius-sm:   4px;
  --k4c-radius:      8px;
  --k4c-radius-lg:   16px;
  --k4c-radius-pill: 999px;
  --k4c-border:      1px solid var(--k4c-grey-200);

  /* ---- Shadows ----------------------------------------------------------- */
  --k4c-shadow-sm:  0 1px 2px rgba(17, 17, 17, 0.06);
  --k4c-shadow:     0 4px 16px rgba(81, 45, 127, 0.10);
  --k4c-shadow-lg:  0 12px 40px rgba(81, 45, 127, 0.16);

  /* ---- Motion ------------------------------------------------------------ */
  --k4c-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --k4c-transition:  220ms var(--k4c-ease);

  /* ---- Z-index scale ----------------------------------------------------- */
  --k4c-z-hero:    1;
  --k4c-z-nav:     100;
  --k4c-z-overlay: 200;

  /* ---- Brand-adopt: repoint quark2 / Pico system vars to the K4C palette - */
  --pico-font-family-sans-serif: var(--k4c-font-body);
  --pico-font-family-display:    var(--k4c-font-heading);
  --q2-accent:      var(--k4c-purple);
  --q2-accent-contrast: var(--k4c-white);
  --q2-link:        var(--k4c-purple);
  --q2-focus-ring:  color-mix(in oklab, var(--k4c-purple) 45%, transparent);
}

/* ---------------------------------------------------------------------------
   Base scaffold — light reset + brand defaults.
   Kept intentionally minimal: quark2/Pico already ships a full reset; these
   rules only assert the brand voice (fonts, body colour, heading treatment).
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--k4c-font-body);
  font-size: var(--k4c-fs-base);
  line-height: var(--k4c-lh-body);
  color: var(--k4c-grey);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-bold);
  line-height: var(--k4c-lh-heading);
  color: var(--k4c-purple);
}

h1 { font-size: var(--k4c-fs-3xl); line-height: var(--k4c-lh-tight); font-weight: var(--k4c-fw-extrabold); }
h2 { font-size: var(--k4c-fs-2xl); }
h3 { font-size: var(--k4c-fs-xl); }

a { color: var(--k4c-purple); text-underline-offset: 0.15em; }
a:hover { color: var(--k4c-purple-light); }

/* Reusable brand primitives the component tasks can lean on ---------------- */

/* Centred content column (mirrors inherited .container; use where a component
   builds its own full-bleed section and needs an inner max-width wrapper). */
.k4c-container {
  width: 100%;
  max-width: var(--k4c-container);
  margin-inline: auto;
  padding-inline: var(--k4c-container-pad);
}

/* Small uppercase eyebrow label (brand block-caps treatment). */
.k4c-eyebrow {
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-semibold);
  font-size: var(--k4c-fs-xs);
  letter-spacing: var(--k4c-tracking-caps);
  text-transform: uppercase;
  color: var(--k4c-purple-light);
}

/* Brand buttons — yellow primary CTA + purple secondary. */
.k4c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k4c-space-2);
  padding: var(--k4c-space-3) var(--k4c-space-6);
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-bold);
  font-size: var(--k4c-fs-base);
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--k4c-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--k4c-transition),
              border-color var(--k4c-transition),
              color var(--k4c-transition),
              transform var(--k4c-transition);
}
.k4c-btn:hover { transform: translateY(-1px); }

.k4c-btn--primary { background: var(--k4c-yellow); color: var(--k4c-grey); }
.k4c-btn--primary:hover { background: var(--k4c-yellow-dark); color: var(--k4c-grey); }

.k4c-btn--secondary { background: var(--k4c-purple); color: var(--k4c-white); }
.k4c-btn--secondary:hover { background: var(--k4c-purple-dark); color: var(--k4c-white); }

.k4c-btn--ghost { background: transparent; color: var(--k4c-purple); border-color: var(--k4c-purple); }
.k4c-btn--ghost:hover { background: var(--k4c-purple); color: var(--k4c-white); }

/* Accessibility: honour reduced-motion for anything the components animate. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}