/* ==========================================================================
   Humaira Syed — Quiet Leadership Transformation (QLT)
   Colors & Typography Foundation
   ==========================================================================
   Color codes locked from HS_QLT_Master_Brand_System (§9.3 Design Rules).
   Type system: Arial in print/social per brand book; Inter substituted for
   web (Arial in browsers is metrically inconsistent and visually flat).
   For the script "syed" signature mark we ship the existing logo file —
   never set type in a script font ourselves.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Dancing+Script:wght@500;600;700&display=swap');

:root {
  /* ---------- BRAND COLORS (locked) ------------------------------------- */
  --qlt-teal:        #00B4B4;  /* Primary teal — logo, accents, marks    */
  --qlt-teal-dark:   #008080;  /* Dark teal — headings, dark backgrounds */
  --qlt-teal-light:  #E0F7F7;  /* Light teal — section backgrounds       */
  --qlt-charcoal:    #333333;  /* Body copy, deep neutrals               */
  --qlt-white:       #FFFFFF;
  --qlt-warm-gray:   #999999;  /* Captions, subtle metadata              */

  /* ---------- DERIVED / SYSTEM TONES ------------------------------------ */
  --qlt-cream:       #FAF7F2;  /* Soft off-white for portrait backdrops  */
  --qlt-teal-50:     #F2FBFB;  /* Lightest tint, near-white wash         */
  --qlt-teal-100:    #E0F7F7;  /* same as light teal, alias              */
  --qlt-teal-200:    #B8ECEC;
  --qlt-teal-300:    #7FDDDD;
  --qlt-teal-400:    #33C7C7;
  --qlt-teal-500:    #00B4B4;  /* primary */
  --qlt-teal-600:    #009A9A;
  --qlt-teal-700:    #008080;  /* dark    */
  --qlt-teal-800:    #006666;
  --qlt-teal-900:    #004D4D;

  --qlt-ink:         #1A1A1A;  /* near-black for max contrast headlines  */
  --qlt-ink-2:       #333333;  /* alias of charcoal                      */
  --qlt-ink-3:       #5A5A5A;  /* secondary copy                         */
  --qlt-ink-4:       #999999;  /* warm gray alias                        */
  --qlt-ink-5:       #C7C7C7;  /* dividers, faint rules                  */
  --qlt-ink-6:       #EDEDED;  /* hairline backgrounds                   */

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND -------------------------- */
  --fg-1:            #1A1A1A;  /* primary text                           */
  --fg-2:            #333333;  /* body                                   */
  --fg-3:            #5A5A5A;  /* secondary                              */
  --fg-4:            #999999;  /* meta                                   */
  --fg-on-teal:      #FFFFFF;  /* text on dark teal                      */
  --fg-accent:       #008080;  /* dark teal accent text on light bg      */

  --bg-1:            #FFFFFF;  /* default surface                        */
  --bg-2:            #FAF7F2;  /* cream alt surface                      */
  --bg-3:            #E0F7F7;  /* light teal section                     */
  --bg-dark:         #008080;  /* dark teal full-bleed                   */
  --bg-darker:       #004D4D;  /* deepest teal                           */

  --border-1:        #EDEDED;
  --border-2:        #C7C7C7;
  --border-teal:     #00B4B4;

  /* ---------- TYPE FAMILIES --------------------------------------------- */
  /* Brand spec: Arial Bold for headers, Arial Regular for body.
     Web alt: Inter (Google-substituted; flagged in README).
     Script: reserved for the "syed" signature in the existing logo.
     We expose Dancing Script as a near-match if a script flourish is
     ever needed in marketing collateral, but it is NOT used in product UI. */
  --font-display:    "Inter", "Arial", "Helvetica Neue", system-ui, sans-serif;
  --font-body:       "Inter", "Arial", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:       ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-script:     "Dancing Script", "Pinyon Script", cursive;

  /* ---------- TYPE SCALE (web units) ------------------------------------ */
  --text-2xs:   11px;
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   28px;
  --text-3xl:   34px;
  --text-4xl:   42px;
  --text-5xl:   54px;
  --text-6xl:   68px;
  --text-7xl:   84px;
  --text-8xl:   104px;

  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.45;
  --leading-loose:   1.6;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;  /* eyebrow / all-caps */

  /* ---------- WEIGHTS --------------------------------------------------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* ---------- SPACING (4 / 8 grid) ------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 120px;

  /* Carousel / social margins (per brand book: 96px on 1080) */
  --margin-social: 96px;

  /* ---------- RADII ----------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------- SHADOWS / ELEVATION --------------------------------------- */
  /* Brand vibe is calm + premium → restrained shadows, never hard drops.  */
  --shadow-1: 0 1px 2px rgba(0, 64, 64, 0.04), 0 1px 1px rgba(0,0,0,0.03);
  --shadow-2: 0 2px 8px rgba(0, 64, 64, 0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-3: 0 8px 24px rgba(0, 64, 64, 0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-4: 0 16px 40px rgba(0, 64, 64, 0.10), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-teal: 0 12px 32px rgba(0, 180, 180, 0.20);

  /* Inner accent — used inside light-teal cards to add depth */
  --shadow-inset-teal: inset 0 0 0 1px rgba(0, 128, 128, 0.10);

  /* ---------- MOTION ---------------------------------------------------- */
  --ease-quiet:    cubic-bezier(0.22, 0.61, 0.36, 1);   /* slow settle    */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
  --dur-slower:  650ms;

  /* ---------- LAYOUT ---------------------------------------------------- */
  --container-narrow: 720px;
  --container-base:  1080px;
  --container-wide:  1280px;
  --container-xl:    1440px;
}

/* ==========================================================================
   SEMANTIC TYPE STYLES
   ========================================================================== */

.qlt-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--qlt-teal-700);
  line-height: var(--leading-snug);
}

.qlt-h1, h1.qlt {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, var(--text-7xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.qlt-h2, h2.qlt {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--qlt-teal-700);
  text-wrap: balance;
}

.qlt-h3, h3.qlt {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--qlt-teal-700);
}

.qlt-h4, h4.qlt {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.qlt-lead {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

.qlt-body, p.qlt {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-loose);
  color: var(--fg-2);
  text-wrap: pretty;
}

.qlt-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

.qlt-meta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-4);
}

.qlt-quote {
  font-family: var(--font-body);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--qlt-teal-700);
  text-wrap: balance;
}

.qlt-handle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--qlt-warm-gray);
  letter-spacing: var(--tracking-wide);
}

/* Reserved: do not use for product UI. Marketing flourishes only. */
.qlt-script {
  font-family: var(--font-script);
  font-weight: var(--weight-semibold);
  color: var(--qlt-charcoal);
}

/* Default body baseline */
body.qlt-body-default {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}