/* ==========================================================================
   ChavisTec Design Tokens
   Framework-agnostic. Safe to copy verbatim into any future app
   (app.chavistec.com, dashboards, etc.) — plain custom properties only.
   Source: ChavisTec Design System + landing page design handoff.
   ========================================================================== */

/* --- Poppins, self-hosted (latin subset, weights actually in use) --------- */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand palette ----------------------------------------------------- */
  --color-nightshade: #361542;
  --color-plum: #4f2867;
  --color-deep-violet: #673083;
  --color-purple-mid: #7b3898;
  --color-violet-peak: #8138a1;
  --color-amethyst: #9b4cc0;
  --color-lavender: #c27fe0;
  --color-soft-lilac: #e0bfef;
  --color-ghost-white: #f8f4ff;
  --color-gold: #e8c97a;
  --color-fuchsia: #ff6b9d;

  /* --- Page surfaces ----------------------------------------------------- */
  /* Darker than --color-nightshade; specific to the flat-surface treatment. */
  --surface-base: #1b0824; /* primary section bg, page bg */
  --surface-alt: #210c2c; /* alternate section bg */
  --surface-footer: #150620;
  --surface-hero-stop-3: #2a0f38;
  --surface-nav: rgba(27, 8, 36, 0.88);
  --surface-nav-panel: rgba(27, 8, 36, 0.97);
  --surface-input: rgba(27, 8, 36, 0.6);
  --surface-card: rgba(248, 244, 255, 0.025);
  --surface-card-hover: rgba(248, 244, 255, 0.05);

  --gradient-hero: linear-gradient(
    158deg,
    #8138a1 0%,
    #4f2867 48%,
    #2a0f38 82%,
    #1b0824 100%
  );
  --gradient-app-icon: linear-gradient(135deg, #c27fe0, #8138a1);

  /* --- Text opacity ladder (all on --color-ghost-white) ------------------- */
  --text-1: #f8f4ff; /* headings */
  --text-75: rgba(248, 244, 255, 0.75); /* feature body */
  --text-72: rgba(248, 244, 255, 0.72); /* lead paragraphs */
  --text-70: rgba(248, 244, 255, 0.7); /* nav links, footer links */
  --text-65: rgba(248, 244, 255, 0.65); /* section body */
  --text-60: rgba(248, 244, 255, 0.6); /* card body, captions */
  --text-55: rgba(248, 244, 255, 0.55); /* trust rows */
  --text-45: rgba(248, 244, 255, 0.45); /* field labels, footer tagline */
  --text-42: rgba(248, 244, 255, 0.42); /* italic notes */
  --text-40: rgba(248, 244, 255, 0.4); /* minor labels */
  --text-35: rgba(248, 244, 255, 0.35); /* footer headings */
  --text-30: rgba(248, 244, 255, 0.3); /* copyright */

  /* --- Border ladder ----------------------------------------------------- */
  --border-22: rgba(248, 244, 255, 0.22); /* ghost buttons */
  --border-18: rgba(248, 244, 255, 0.18); /* burger */
  --border-14: rgba(248, 244, 255, 0.14); /* inputs */
  --border-12: rgba(248, 244, 255, 0.12); /* divider rules */
  --border-10: rgba(248, 244, 255, 0.1); /* cards */
  --border-08: rgba(248, 244, 255, 0.08); /* step dividers, nav */
  --border-07: rgba(248, 244, 255, 0.07); /* mobile nav dividers */
  --border-06: rgba(248, 244, 255, 0.06); /* section tops */

  --border-gold-50: rgba(232, 201, 122, 0.5); /* thank-you ring */
  --border-gold-45: rgba(232, 201, 122, 0.45); /* inverting ghost buttons, pills */
  --border-gold-40: rgba(232, 201, 122, 0.4); /* hero eyebrow pill */
  --border-gold-35: rgba(232, 201, 122, 0.35); /* FAQ indicators */
  --border-gold-30: rgba(232, 201, 122, 0.3); /* case study card */
  --border-gold-28: rgba(232, 201, 122, 0.28); /* icon boxes, testimonial rule */

  /* --- Typography -------------------------------------------------------- */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-sans);

  /* Fluid display sizes */
  --size-hero: clamp(42px, 6vw, 72px);
  --size-statement: clamp(46px, 9vw, 104px);
  --size-h2: clamp(28px, 4vw, 44px);
  --size-h2-form: clamp(28px, 4.4vw, 48px);
  --size-quote: clamp(24px, 3.2vw, 38px);

  /* --- Geometry ---------------------------------------------------------- */
  --radius-pill: 100px;
  --radius-app-icon: 18px;
  --radius-card: 16px;
  --radius-image: 14px;
  --radius-input: 10px;

  --pad-section: 100px 40px;
  --pad-section-form: 120px 40px;
  --pad-section-hero: 88px 40px 100px;

  --nav-height: 76px;

  /* --- Glow (primary CTA only) ------------------------------------------- */
  --glow-cta: 0 0 40px rgba(129, 56, 161, 0.3);
  --glow-cta-hover: 0 0 56px rgba(129, 56, 161, 0.6);
  --glow-cta-hero-hover: 0 0 32px rgba(129, 56, 161, 0.55);

  /* --- Motion ------------------------------------------------------------ */
  --t-transform: 0.15s;
  --t-fast: 0.2s;
  --t-card: 0.22s;
  --t-panel: 0.35s;
  --t-focus: 0.4s;
  --t-entrance: 0.6s;
  --t-reveal: 0.7s;
}