/* ============================================================
   SYNTIA — Design Tokens (variables.css)
   Source: Figma Dev Mode extraction — 26/02/2026
   ============================================================ */

:root {

  /* ---- Colors: Primary ---- */
  --color-navy:            #0F0049;
  --color-purple:          #714EFF;
  --color-purple-light:    #AA86FF;

  /* ---- Colors: Secondary ---- */
  --color-green-mint:      #A0EAA3;
  --color-green-bg:        #E0F8DE;
  --color-green-dark:      #004642;
  --color-green-success:   #62D066;

  /* ---- Colors: Accents ---- */
  --color-cyan:            #93E7FE;
  --color-yellow:          #FFD978;
  --color-orange:          #FFA666;
  --color-pink:            #FAA9E4;

  /* ---- Colors: Neutral ---- */
  --color-body:            #2F2D3B;
  --color-muted:           #82808A;
  --color-muted-alt:       #787878;
  --color-divider:         #E0DFE5;
  --color-black:           #000000;
  --color-white:           #FFFFFF;

  /* ---- Colors: Background ---- */
  --color-bg-light:        #F6F5F8;
  --color-bg-white:        #FFFFFF;
  --color-bg-navy:         #0F0049;

  /* ---- Gradients ---- */
  --gradient-cta:          linear-gradient(135deg, #714EFF 0%, #AA86FF 100%);

  /* ---- Typography ---- */
  --font-family:           'Satoshi', sans-serif;

  --fw-regular:            400;
  --fw-medium:             500;
  --fw-bold:               700;
  --fw-black:              900;

  /* H1 — Hero */
  --h1-size:               64px;
  --h1-line:               74px;
  --h1-tracking:           -0.8889px;
  --h1-weight:             var(--fw-bold);

  /* H2 — Section titles */
  --h2-size:               52px;
  --h2-line:               62px;
  --h2-tracking:           -0.7222px;
  --h2-weight:             var(--fw-bold);

  /* H2 CTA — CTA block */
  --h2-cta-size:           48px;
  --h2-cta-line:           58px;
  --h2-cta-tracking:       -0.6667px;
  --h2-cta-weight:         var(--fw-bold);

  /* H3 Stats */
  --h3-stats-size:         52px;
  --h3-stats-weight:       var(--fw-bold);

  /* H3 Features */
  --h3-features-size:      24px;
  --h3-features-weight:    var(--fw-medium);

  /* Quote */
  --quote-size:            22px;
  --quote-line:            34px;
  --quote-weight:          var(--fw-medium);

  /* Body Large */
  --body-lg-size:          18px;
  --body-lg-line:          28px;
  --body-lg-weight:        var(--fw-regular);

  /* Body Medium */
  --body-md-size:          18px;
  --body-md-line:          28px;
  --body-md-tracking:      -0.25px;

  /* Body Regular */
  --body-size:             16px;
  --body-weight:           var(--fw-regular);

  /* Small */
  --small-size:            14px;
  --small-weight:          var(--fw-regular);

  /* Button CTA */
  --btn-cta-size:          18px;
  --btn-cta-weight:        var(--fw-bold);
  --btn-cta-tracking:      -0.25px;

  /* Button Nav */
  --btn-nav-size:          14px;
  --btn-nav-weight:        var(--fw-bold);
  --btn-nav-tracking:      -0.1944px;

  /* Nav Links */
  --nav-size:              14px;
  --nav-weight:            var(--fw-medium);

  /* Badge */
  --badge-size:            14px;
  --badge-weight:          var(--fw-bold);
  --badge-tracking:        1px;

  /* ---- Layout ---- */
  --container:             1140px;
  --page-width:            1440px;
  --margin-side:           150px;

  /* ---- Spacing ---- */
  --space-4:               4px;
  --space-8:               8px;
  --space-12:              12px;
  --space-16:              16px;
  --space-20:              20px;
  --space-24:              24px;
  --space-29:              29px;
  --space-30:              30px;
  --space-32:              32px;
  --space-40:              40px;
  --space-48:              48px;
  --space-56:              56px;
  --space-64:              64px;
  --space-80:              80px;
  --space-96:              96px;
  --space-120:             120px;

  /* ---- Grid Gutters ---- */
  --gutter-features:       29px;   /* Feature grid: 4 × 263px */
  --gutter-faq:            30px;   /* FAQ grid: 2 × 555px */
  --gutter-pricing:        23px;   /* Pricing grid: 3 × 380px */

  /* ---- Radius ---- */
  --radius-sm:             6.3px;
  --radius-chart:          5.184px;
  --radius-faq:            12px;
  --radius-card:           16px;
  --radius-badge:          16px;
  --radius-mini:           14.4px;
  --radius-mini-card:      18px;
  --radius-nav-btn:        20px;
  --radius-mockup:         21px;
  --radius-cta-block:      24px;
  --radius-btn:            28px;
  --radius-circle:         50%;

  /* ---- Shadows ---- */
  --shadow-float:          0px 16px 48px rgba(0, 0, 0, 0.08);
  --shadow-card-cta:       7px 22px 43px rgba(0, 0, 0, 0.12);
  --shadow-dot:            0px 2px 4px rgba(68, 68, 79, 0.15);

  /* ---- Topbar ---- */
  --topbar-height:         80px;

  /* ---- Transitions ---- */
  --transition-fast:       150ms ease;
  --transition-base:       250ms ease;
  --transition-slow:       400ms ease;
}