/* =========================================================
   ASPIRA DESIGN SYSTEM — TOKENS  v1.0
   Source of truth: Chennai landing page (Figma website-2026)
   Every value below is used by aspira-ds.css. Change it here,
   it changes everywhere.
   ========================================================= */

:root {
  /* ---------- Colour · Neutrals ---------- */
  --ads-ink-900: #161A1D;   /* primary text, dark surfaces, primary button */
  --ads-ink-800: #34393D;   /* body-lead text, dark-surface cards */
  --ads-ink-700: #43484C;   /* body text, icons */
  --ads-ink-500: #636C74;   /* muted text, captions */
  --ads-ink-400: #8B9298;   /* placeholder-strong, disabled text */
  --ads-ink-300: #AEB4B9;   /* subtle text on dark */
  --ads-ink-200: #DCDEE0;   /* input border, dividers */
  --ads-ink-150: #E6E8EA;   /* light text on dark, inactive fills */
  --ads-ink-100: #EEF0F1;   /* page background, soft cards */
  --ads-ink-50:  #F9FAFA;   /* input fill */
  --ads-white:   #FFFFFF;
  --ads-black:   #000000;

  /* ---------- Colour · Brand ---------- */
  --ads-yellow-500: #FFD400; /* brand accent, hover fill, CTA band */
  --ads-yellow-400: #FCDE45; /* badge fill */
  --ads-yellow-50:  #FFF8D6; /* highlight background */
  --ads-pink-200:   #ECD5D7; /* hero visual, icon tile */
  --ads-sky-400:    #45C8FC; /* price card */
  --ads-sky-500:    #00BBFF; /* links on dark */
  --ads-sky-600:    #00ADEF; /* check icons */

  /* ---------- Colour · Step / category tints ---------- */
  --ads-tint-cream:  #FEF6DD;
  --ads-tint-sky:    #BEECFE;
  --ads-tint-lime:   #E6FDAA;
  --ads-tint-violet: #DABEFE;

  /* ---------- Colour · Feedback ---------- */
  --ads-error-600: #D93036;
  --ads-error-500: #E5484D;
  --ads-error-50:  #FDECEC;
  --ads-success-600: #1F8A4C;
  --ads-success-200: #B9D9C4;
  --ads-success-50:  #E9F7EF;
  --ads-whatsapp: #25D366;

  /* ---------- Colour · Semantic aliases (use these in components) ---------- */
  --ads-color-bg: var(--ads-ink-100);
  --ads-color-surface: var(--ads-white);
  --ads-color-surface-soft: var(--ads-ink-100);
  --ads-color-surface-inverse: var(--ads-ink-900);
  --ads-color-text: var(--ads-ink-900);
  --ads-color-text-body: var(--ads-ink-700);
  --ads-color-text-lead: var(--ads-ink-800);
  --ads-color-text-muted: var(--ads-ink-500);
  --ads-color-text-inverse: var(--ads-white);
  --ads-color-text-inverse-muted: var(--ads-ink-150);
  --ads-color-border: var(--ads-ink-200);
  --ads-color-accent: var(--ads-yellow-500);
  --ads-color-link: var(--ads-ink-900);
  --ads-color-link-inverse: var(--ads-sky-500);
  --ads-color-focus: var(--ads-ink-900);

  /* ---------- Typography ---------- */
  --ads-font-sans: 'Google Sans Flex', 'Google Sans', 'Product Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ads-font-alt: 'Mona Sans', var(--ads-font-sans);   /* small UI labels (rating, name tags) */
  --ads-font-variation: "GRAD" 0, "ROND" 0, "wdth" 100;
  --ads-font-variation-display: "GRAD" 0, "ROND" 0, "wdth" 100, "opsz" 32; /* matches Figma rendering ≥ 32px */

  --ads-weight-regular: 400;
  --ads-weight-medium: 500;
  --ads-weight-semibold: 600;
  --ads-weight-bold: 700;

  /* Type scale — desktop (size / line-height) */
  --ads-text-h1: 62px;      --ads-leading-h1: 68px;
  --ads-text-h2: 54px;      --ads-leading-h2: 64px;
  --ads-text-h3: 40px;      --ads-leading-h3: 50px;
  --ads-text-h4: 32px;      --ads-leading-h4: 38px;
  --ads-text-h5: 24px;      --ads-leading-h5: 30px;
  --ads-text-h6: 20px;      --ads-leading-h6: 25px;
  --ads-text-subtitle: 24px; --ads-leading-subtitle: 30px;
  --ads-text-lead: 20px;    --ads-leading-lead: 28px;
  --ads-text-body: 18px;    --ads-leading-body: 26px;
  --ads-text-body-sm: 16px; --ads-leading-body-sm: 22px;
  --ads-text-caption: 14px; --ads-leading-caption: 18px;
  --ads-text-overline: 13px; --ads-leading-overline: 18px;
  --ads-text-fine: 12px;    --ads-leading-fine: 16px;
  --ads-text-price: 80px;   --ads-leading-price: 66px;
  --ads-text-button-lg: 18px;
  --ads-text-button-md: 16px;
  --ads-text-button-sm: 14px;

  /* ---------- Spacing (4-pt base + the 10/30 steps the layout uses) ---------- */
  --ads-space-0: 0;
  --ads-space-1: 4px;
  --ads-space-2: 8px;
  --ads-space-3: 10px;
  --ads-space-4: 12px;
  --ads-space-5: 16px;
  --ads-space-6: 20px;
  --ads-space-7: 24px;
  --ads-space-8: 30px;
  --ads-space-9: 40px;
  --ads-space-10: 48px;
  --ads-space-11: 60px;
  --ads-space-12: 80px;
  --ads-space-13: 100px;

  /* Section rhythm */
  --ads-section-y: 100px;
  --ads-section-gap: 10px;     /* gap between rounded bands */

  /* ---------- Radius ---------- */
  --ads-radius-xs: 8px;    /* inputs, small alerts */
  --ads-radius-sm: 16px;   /* pills, week tag */
  --ads-radius-md: 20px;   /* small cards, FAQ item, mentor chip */
  --ads-radius-lg: 30px;   /* cards, form card, modal */
  --ads-radius-xl: 40px;   /* sections, feature images, buttons */
  --ads-radius-2xl: 52px;  /* hero/FAQ image */
  --ads-radius-pill: 999px;

  /* ---------- Borders ---------- */
  --ads-border-1: 1px;
  --ads-border-2: 2px;     /* buttons, inputs */
  --ads-border-3: 3px;     /* FAQ items */

  /* ---------- Elevation ---------- */
  --ads-shadow-0: none;
  --ads-shadow-1: 0 1px 0 rgba(22, 26, 29, .06);
  --ads-shadow-2: 0 8px 24px rgba(22, 26, 29, .12);
  --ads-shadow-3: 0 10px 30px rgba(22, 26, 29, .16);
  --ads-shadow-float: 0 8px 24px rgba(37, 211, 102, .40);
  --ads-shadow-focus: 0 0 0 3px rgba(22, 26, 29, .08);
  --ads-shadow-error: 0 0 0 3px rgba(229, 72, 77, .12);

  /* ---------- Overlays ---------- */
  --ads-overlay-modal: rgba(22, 26, 29, .90);
  --ads-overlay-card: rgba(52, 57, 61, .95);
  --ads-gradient-photo: linear-gradient(180deg, rgba(0,0,0,0) 55%, #000 100%);

  /* ---------- Motion ---------- */
  --ads-ease: cubic-bezier(.2, .7, .2, 1);
  --ads-duration-fast: 200ms;
  --ads-duration-base: 300ms;
  --ads-duration-slow: 350ms;

  /* ---------- Layout ---------- */
  --ads-container: 1142px;     /* 1366 artboard − 112px gutters */
  --ads-gutter: 16px;          /* mobile side gutter */
  --ads-grid-gap: 20px;
  --ads-header-h-mobile: 64px;

  /* ---------- Z-index ---------- */
  --ads-z-base: 1;
  --ads-z-header: 20;
  --ads-z-float: 60;
  --ads-z-nav: 70;
  --ads-z-modal: 100;
}

/* Breakpoints (for reference — CSS variables can't be used in media queries)
   --ads-bp-mobile: 360px   (design target)
   --ads-bp-sm:     480px
   --ads-bp-md:     768px   (≤767 = mobile layout)
   --ads-bp-lg:     1024px  (≤1024 = stacked layout)
   --ads-bp-xl:     1240px
   --ads-bp-2xl:    1366px  (desktop artboard)                     */

@media (max-width: 767px) {
  :root {
    --ads-text-h1: 36px;      --ads-leading-h1: 42px;
    --ads-text-h2: 32px;      --ads-leading-h2: 38px;
    --ads-text-h3: 28px;      --ads-leading-h3: 34px;
    --ads-text-h4: 26px;      --ads-leading-h4: 32px;
    --ads-text-h5: 20px;      --ads-leading-h5: 26px;
    --ads-text-h6: 17px;      --ads-leading-h6: 22px;
    --ads-text-subtitle: 18px; --ads-leading-subtitle: 24px;
    --ads-text-lead: 17px;    --ads-leading-lead: 25px;
    --ads-text-body: 16px;    --ads-leading-body: 24px;
    --ads-text-body-sm: 15px; --ads-leading-body-sm: 21px;
    --ads-text-price: 60px;   --ads-leading-price: 56px;
    --ads-text-button-lg: 16px;
    --ads-section-y: 48px;
    --ads-radius-xl: 28px;
    --ads-radius-2xl: 28px;
  }
}