/* ============================================================
   SimplyGo Design Tokens
   Source: Figma 8TvuY5qzSpU7MU8K0FBINP
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOURS — Brand
  ---------------------------------------------------------- */
  --color-brand-blue:          #3f84c5;
  --color-brand-dark-blue:     #316aa1;
  --color-brand-light-blue:    #b1cde7;
  --color-brand-blue-50:       #ebf2f9;
  --color-brand-blue-900:      #0c1a27;
  --color-brand-amethyst:      #766eb2;
  --color-brand-amethyst-50:   #f4f4fe;

  /* ----------------------------------------------------------
     COLOURS — Semantic surfaces
  ---------------------------------------------------------- */
  --surface-primary:           #ffffff;
  --surface-brand-blue:        var(--color-brand-blue);
  --surface-brand-blue-50:     var(--color-brand-blue-50);
  --surface-brand-light-blue:  var(--color-brand-light-blue);
  --surface-brand-blue-900:    var(--color-brand-blue-900);
  --surface-invert:            #000000;

  /* ----------------------------------------------------------
     COLOURS — Text
  ---------------------------------------------------------- */
  --text-primary:              #000000;
  --text-secondary:            #000000;
  --text-invert:               #ffffff;
  --text-brand-blue:           var(--color-brand-blue);
  --text-brand-dark-blue:      var(--color-brand-dark-blue);

  /* ----------------------------------------------------------
     COLOURS — Border
  ---------------------------------------------------------- */
  --border-brand-blue:         var(--color-brand-blue);
  --border-brand-dark-blue:    var(--color-brand-dark-blue);
  --border-brand-light-blue:   var(--color-brand-light-blue);
  --border-brand-amethyst:     var(--color-brand-amethyst);
  --border-grey:               #8c8c8c;
  --border-invert:             #ffffff;
  --border-divider:            #e0e0e0;

  /* ----------------------------------------------------------
     GRADIENTS
  ---------------------------------------------------------- */
  --gradient-banner:   linear-gradient(186deg, #a35aa2 0%, #4781c2 100%);
  --gradient-app-card: linear-gradient(225deg, #a35aa2 0%, #4781c2 100%);
  --gradient-ask-addy: linear-gradient(90deg, #a35aa2 0.94%, #4781c1 99.06%);

  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */
  --font-family:        'Montserrat', sans-serif;

  /* Size / line-height pairs */
  --text-display-size:      48px;
  --text-display-lh:        56px;

  --text-h1-size:           40px;
  --text-h1-lh:             48px;

  --text-h2-size:           33px;
  --text-h2-lh:             41px;

  --text-h3-size:           28px;
  --text-h3-lh:             36px;

  --text-subhead-size:      23px;
  --text-subhead-lh:        31px;

  --text-body-lg-size:      19px;
  --text-body-lg-lh:        27px;

  --text-body-size:         16px;
  --text-body-lh:           24px;

  --text-cta-size:          16px;
  --text-cta-lh:            16px;   /* no line-height increase for CTA */

  --text-small-1-size:      13px;
  --text-small-1-lh:        21px;

  --text-small-2-size:      11px;
  --text-small-2-lh:        19px;

  /* ----------------------------------------------------------
     SPACING
  ---------------------------------------------------------- */
  --space-4:    4px;
  --space-8:    8px;
  --space-12:   12px;
  --space-16:   16px;
  --space-24:   24px;
  --space-32:   32px;
  --space-40:   40px;
  --space-48:   48px;
  --space-56:   56px;
  --space-64:   64px;
  --space-80:   80px;
  --space-120:  120px;

  /* ----------------------------------------------------------
     CORNER RADIUS
  ---------------------------------------------------------- */
  --radius-tiny:     4px;    /* buttons */
  --radius-xsmall:   8px;
  --radius-small:    12px;
  --radius-medium:   16px;
  --radius-large:    24px;
  --radius-xlarge:   32px;
  --radius-2xlarge:  40px;
  --radius-max:      999px;

  /* Named semantic aliases */
  --radius-primary-btn:  4px;
  --radius-rounded-btn:  999px;
  --radius-image:        6px;
  --radius-card-large:   6px;
  --radius-card-small:   8px;
  --radius-others:       10px;

  /* ----------------------------------------------------------
     LAYOUT — Section paddings
  ---------------------------------------------------------- */
  --layout-margin:        120px;   /* 12-col horizontal */
  --layout-margin-10col:  229px;   /* 10-col horizontal (narrower content) */
  --layout-content-margin: clamp(var(--space-40), 6.4vw, var(--layout-margin));
  --layout-narrow-content-margin: clamp(var(--space-40), 17.3vw, var(--layout-margin-10col));
  --layout-section-tb:     56px;   /* section top & bottom */
  --layout-banner-tb:      56px;   /* banner top & bottom */

  /* Card internal padding */
  --card-px:  64px;
  --card-py:  40px;

  /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */
  --shadow-card:  0 4px 24px 0 rgba(0, 0, 0, 0.08);
  --shadow-app:   0 3.7px 27.7px 0 rgba(0, 0, 0, 0.25);

  /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */
  --transition-fast:    150ms ease;
  --transition-normal:  250ms ease;
}

@media (max-width: 767px) {
  :root {
    --layout-content-margin: var(--space-24);
    --layout-narrow-content-margin: var(--space-24);
  }
}