/* ============================================================
   Astuce Québec — Foundations
   ------------------------------------------------------------
   Brand: Astuce Québec — independent ACN representative
   helping Québec residents compare telecom, insurance and
   mortgage offers (TELUS, Koodo, Mylo, 8Twelve Mortgage).

   Voice: confident-but-calm advisor. Bilingual reality, but
   the site is French (Québec). Calls are free, no pressure.
   ============================================================ */

/* --- Webfont ----------------------------------------------- */
/* Primary face is loaded from Google Fonts:
     <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
   No local copies are kept — Google CDN is canonical here.   */

:root {

  /* --- Brand color ---------------------------------------- */
  --aq-blue:        #2563EB;   /* Primary — links, CTAs, brand */
  --aq-blue-dark:   #1D4ED8;   /* Hover / pressed CTA          */
  --aq-blue-mid:    #DBEAFE;   /* Avatar wells, soft chips     */
  --aq-blue-light:  #EFF6FF;   /* Tag pills, hover wash        */
  --aq-sky:         #38BDF8;   /* Accent gradient stop         */

  /* --- Neutrals (slate scale) ---------------------------- */
  --aq-text:        #0F172A;   /* Headings, primary text       */
  --aq-text-2:      #475569;   /* Body, secondary              */
  --aq-text-3:      #94A3B8;   /* Captions, hints              */
  --aq-border:      #E2E8F0;   /* Default 1px borders          */
  --aq-bg:          #FFFFFF;   /* Default surface              */
  --aq-bg-2:        #F8FAFC;   /* Section wash / form surface  */
  --aq-bg-dark:     #030D1A;   /* Legal/policies dark band     */

  /* --- Status / accent (used sparingly) ------------------ */
  --aq-green:       #10B981;   /* "Online" / success dot       */
  --aq-success-bg:  #ECFDF5;
  --aq-success-fg:  #065F46;
  --aq-success-bd:  #6EE7B7;
  --aq-amber:       #FBBF24;   /* Star ratings                 */
  --aq-orange:      #F97316;
  --aq-purple:      #8B5CF6;

  /* --- Partner palette (use ONLY in partner contexts) ---- */
  --aq-telus:       #4D9A47;   /* "TELUS green" used in tags   */
  --aq-telus-deep:  #4B286D;   /* Mini feature card background */
  --aq-koodo:       #EF0D79;   /* Koodo magenta                */
  --aq-koodo-tint:  #FFF1F0;
  --aq-mylo:        #00B5B0;   /* Mylo teal                    */
  --aq-mylo-tint:   #F0FDFA;
  --aq-eight:       #003087;   /* 8Twelve Mortgage navy        */

  /* --- Typography ---------------------------------------- */
  --aq-font:        'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale (clamped responsive sizes match the live site) */
  --aq-h1:          clamp(2.5rem, 4.5vw, 3.8rem);  /* 40–61px  */
  --aq-h2:          clamp(1.9rem, 3.0vw, 2.7rem);  /* 30–43px  */
  --aq-h3:          1.20rem;                       /* 19.2px   */
  --aq-h4:          1.05rem;                       /* 16.8px   */
  --aq-body:        1.00rem;                       /* 16px     */
  --aq-body-sm:     0.90rem;                       /* 14.4px   */
  --aq-caption:     0.80rem;                       /* 12.8px   */
  --aq-micro:       0.72rem;                       /* 11.5px — eyebrows */

  --aq-eyebrow-tracking: 2px;       /* uppercase eyebrow tracking  */
  --aq-tracking-tight:   -1.2px;    /* H2                          */
  --aq-tracking-tighter: -2px;      /* H1 hero                     */
  --aq-leading-tight:    1.15;      /* headings                    */
  --aq-leading-body:     1.70;      /* paragraphs                  */

  /* --- Spacing ------------------------------------------- */
  --aq-s-1:  4px;
  --aq-s-2:  8px;
  --aq-s-3:  12px;
  --aq-s-4:  16px;
  --aq-s-5:  20px;
  --aq-s-6:  24px;
  --aq-s-8:  32px;
  --aq-s-10: 40px;
  --aq-s-12: 48px;
  --aq-s-16: 64px;
  --aq-s-20: 80px;
  --aq-s-24: 96px;             /* nav height                       */
  --aq-section-y: 90px;        /* vertical padding on big sections */
  --aq-page-x:    5vw;         /* page gutter                      */
  --aq-max-w:     1160px;      /* content max width                */

  /* --- Radii --------------------------------------------- */
  --aq-r-1:  6px;     /* small chips / inputs           */
  --aq-r-2:  8px;     /* buttons / nav items            */
  --aq-r-3:  10px;    /* primary buttons / form fields  */
  --aq-r-4:  12px;    /* floating chips, plan rows      */
  --aq-r-5:  14px;    /* metric tiles                   */
  --aq-r-6:  16px;    /* cards, form-card, hero box     */
  --aq-r-7:  20px;    /* phone mock surface             */
  --aq-r-pill: 100px; /* tag pills, floating CTA        */

  /* --- Borders ------------------------------------------- */
  --aq-bw-thin:   1px;
  --aq-bw-medium: 1.5px;       /* inputs, button-white            */

  /* --- Shadows (used sparingly) -------------------------- */
  --aq-shadow-sm:   0 4px 6px -1px rgba(0,0,0,0.05);
  --aq-shadow-md:   0 8px 24px rgba(0,0,0,0.08);          /* float chips */
  --aq-shadow-lg:   0 20px 50px -10px rgba(37,99,235,0.12); /* phone mock */
  --aq-shadow-hover:0 12px 40px rgba(37,99,235,0.10);      /* card hover */
  --aq-shadow-cta:  0 8px 30px rgba(37,99,235,0.40);       /* floating CTA */

  /* --- Motion -------------------------------------------- */
  --aq-dur-quick:   0.15s;
  --aq-dur-base:    0.20s;
  --aq-dur-slow:    0.30s;
  --aq-dur-reveal:  0.65s;
  --aq-ease:        ease;
}

/* ============================================================
   Semantic tags — drop-in defaults
   ============================================================ */

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: var(--aq-font);
  background: var(--aq-bg);
  color: var(--aq-text);
  font-size: var(--aq-body);
  line-height: var(--aq-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .aq-h1 {
  font-family: var(--aq-font);
  font-size: var(--aq-h1);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: var(--aq-tracking-tighter);
  color: var(--aq-text);
}

h2, .aq-h2 {
  font-family: var(--aq-font);
  font-size: var(--aq-h2);
  font-weight: 800;
  line-height: var(--aq-leading-tight);
  letter-spacing: var(--aq-tracking-tight);
  color: var(--aq-text);
}

h3, .aq-h3 {
  font-family: var(--aq-font);
  font-size: var(--aq-h3);
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--aq-text);
}

h4, .aq-h4 {
  font-family: var(--aq-font);
  font-size: var(--aq-h4);
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--aq-text);
}

p, .aq-body {
  font-family: var(--aq-font);
  font-size: var(--aq-body);
  line-height: var(--aq-leading-body);
  color: var(--aq-text-2);
  font-weight: 400;
}

small, .aq-caption {
  font-family: var(--aq-font);
  font-size: var(--aq-caption);
  color: var(--aq-text-3);
}

a, .aq-link {
  color: var(--aq-blue);
  text-decoration: none;
  transition: color var(--aq-dur-base) var(--aq-ease);
}
a:hover, .aq-link:hover { color: var(--aq-blue-dark); text-decoration: underline; }

/* Eyebrow — small UPPERCASE label that sits above section titles */
.aq-eyebrow {
  font-family: var(--aq-font);
  font-size: var(--aq-micro);
  font-weight: 700;
  letter-spacing: var(--aq-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--aq-blue);
}

/* Tag pill — soft blue chip used in the hero ("Fièrement québécois") */
.aq-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--aq-blue-light);
  border: 1px solid #BFDBFE;
  border-radius: var(--aq-r-pill);
  padding: 5px 14px 5px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--aq-blue);
  letter-spacing: 0.2px;
}