/* ==========================================================================
   QUIKLE.CO.ZA — DESIGN TOKENS
   Single source of truth. Every colour, size and rhythm on the site reads
   from here. Rebranding means changing this file and nothing else.
   ========================================================================== */

/* ---------- Self-hosted typefaces (no third-party font CDN) ---------- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/poppins-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/poppins-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Core palette -------------------------------------------------
     The 2023 site used Midnight Blue as the surface. The rebuild inverts
     that relationship: cream is the surface, navy becomes the ink. Same
     identity, considerably more air. */
  --page:           #F5F4F0;
  --ink:            #191970;
  --ink-muted:      #19197099;
  --ink-faint:      #19197055;
  --coral:          #E27D60;
  --coral-deep:     #C9634A;
  --teal:           #41B3A3;
  --teal-deep:      #2F8C7F;
  --surface:        rgba(255, 255, 255, 0.75);
  --surface-solid:  #FFFFFF;
  --neutral-light:  #E8E8E8;
  --charcoal:       #333333;
  --lavender:       #C8CBEF;

  /* Tints derived from the two accents — used for card washes so we never
     hand-pick a new hex at component level. */
  --coral-wash:     rgba(226, 125, 96, 0.10);
  --coral-line:     rgba(226, 125, 96, 0.28);
  --teal-wash:      rgba(65, 179, 163, 0.10);
  --teal-line:      rgba(65, 179, 163, 0.30);
  --ink-wash:       rgba(25, 25, 112, 0.06);

  /* ---------- WebGL palette (5 stops, feeds the shader texture) ---------- */
  --gl-0: #F5F4F0;
  --gl-1: #F0D5C8;
  --gl-2: #C8E8E5;
  --gl-3: #C8CBEF;
  --gl-4: #F5F4F0;
  --gl-cap: #F5F4F0;
  --gl-fallback: linear-gradient(135deg, #F0D5C8 0%, #E8E8E8 55%, #C8CBEF 100%);

  /* ---------- Activity colours (shimmer, ripples) ---------- */
  --activity-from: #E27D60;
  --activity-to:   #41B3A3;

  /* ---------- Typography -------------------------------------------------- */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-hero:       56px;
  --text-display:    44px;
  --text-heading:    32px;
  --text-subheading: 22px;
  --text-body:       16px;
  --text-label:      13px;
  --text-caption:    11px;

  --leading-hero:  1.06;
  --leading-tight: 1.2;
  --leading-body:  1.65;

  --tracking-eyebrow: 0.14em;
  --tracking-tight:  -0.02em;

  /* ---------- Geometry ---------------------------------------------------- */
  --radius-pill:  9999px;
  --radius-card:  20px;
  --radius-input: 12px;
  --radius-sm:    8px;

  --border-hair: 1px solid var(--ink-faint);

  /* ---------- Layout rhythm ---------------------------------------------- */
  --page-gutter:  24px;
  --container:    1200px;
  --container-narrow: 760px;
  --section-y:    100px;
  --section-y-lg: 140px;
  --stack-sm:     12px;
  --stack-md:     24px;
  --stack-lg:     48px;
  --stack-xl:     80px;

  /* ---------- Elevation --------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(25, 25, 112, 0.04), 0 4px 12px rgba(25, 25, 112, 0.04);
  --shadow-md:   0 10px 30px rgba(25, 25, 112, 0.07);
  --shadow-lg:   0 20px 50px rgba(25, 25, 112, 0.10);
  --shadow-coral: 0 10px 25px rgba(226, 125, 96, 0.28);
  --blur-glass:  blur(10px);

  /* ---------- Motion ------------------------------------------------------
     One easing family so every transition on the site feels like the same
     hand. --ease-out is the workhorse; --ease-spring is reserved for
     things that arrive (cards, panels, the docked bar). */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    180ms;
  --dur-base:    300ms;
  --dur-slow:    560ms;

  /* ---------- Chrome ------------------------------------------------------ */
  --z-bg:     -10;
  --z-content:  1;
  --z-lens:     30;
  --z-nav:      50;
  --z-rail:     40;
  --z-dock:     45;
  --z-chat:     9999;
  --z-wa:       9998;

  --nav-h: 76px;

  /* ---------- Aliases used by base.css -----------------------------------
     base.css was written against these shorter names; keeping them as
     aliases means a single upstream change still propagates everywhere. */
  --content-max: var(--container);
  --gutter: var(--page-gutter);
  --section-pad: var(--section-y);
  --hairline: rgba(25, 25, 112, 0.12);
  --hairline-strong: rgba(25, 25, 112, 0.22);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
}

/* ---------- Responsive token overrides ---------------------------------- */
@media (max-width: 1024px) {
  :root {
    --text-hero:       44px;
    --text-display:    36px;
    --text-heading:    28px;
    --text-subheading: 20px;
    --section-y:       80px;
    --section-y-lg:    96px;
  }
}

@media (max-width: 767px) {
  :root {
    --page-gutter:     20px;
    --text-hero:       36px;
    --text-display:    30px;
    --text-heading:    25px;
    --text-subheading: 19px;
    --text-body:       16px;
    --section-y:       64px;
    --section-y-lg:    72px;
    --stack-xl:        56px;
    --nav-h:           64px;
  }
}

/* Reduced motion: collapse every duration to a hair above zero. Individual
   effects also check this query in JS before starting a render loop. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}