/*
 * Design tokens — generated from the MarkWealthCorp Figma file
 * (07Dx9VXU5UOFHxiw8Z8gNZ, page "US Website").
 *
 * Variable names mirror the Figma variable structure (kebab-cased)
 * so designers and developers can talk in the same vocabulary.
 *
 * Source of truth: Figma. Update this file by re-running the Figma MCP
 * `get_variable_defs` extraction — do NOT edit ad-hoc.
 */

:root {
  /* ---------------------------------------------------------------- *
   * Brand — Blue scale
   * ---------------------------------------------------------------- */
  --color-blue-900: #001591; /* Blue/900                              */
  --color-blue-700: #3249cd; /* Blue/700, Brand colors/Blue-700 dark  */
  --color-blue-300: #a1bfff; /* Blue/300                              */
  --color-blue-50:  #f5f9ff; /* Brand colors/Blue-50 extra-light      */

  /* ---------------------------------------------------------------- *
   * Text / neutrals
   * ---------------------------------------------------------------- */
  --color-text-0:   #ffffff; /* Text/0   — on dark backgrounds        */
  --color-text-500: #a4a2b2; /* Text/500 — placeholder, disabled      */
  --color-text-700: #3249cd; /* Text/700 — link / accent              */
  --color-text-800: #666370; /* Text/800 — secondary                  */
  --color-text-900: #454663; /* Text/900 — body default               */
  --color-text-950: #2c2c3c; /* Text/950 — headings                   */
  --color-text-980: #25242d; /* Text/980 — strongest                  */

  --color-neutral-white: #ffffff;
  --color-neutral-980:   #25242d;
  --color-neutral-1:     #333333;

  /* ---------------------------------------------------------------- *
   * Backgrounds
   * ---------------------------------------------------------------- */
  --color-bg-0:             #ffffff;

  /* Pastel section backgrounds (Background/Secondary/*) */
  --color-bg-blue-50:       #f5f9ff;
  --color-bg-green-50:      #f1f8f2;
  --color-bg-green-90:      #e9f8eb;
  --color-bg-green-100:     #c9edcf;
  --color-bg-yellow-50:     #fff5da;
  --color-bg-yellow-100:    #ffefc2;
  --color-bg-red-50:        #fff7f7;
  --color-bg-red-100:       #ffe3e5;
  --color-bg-orange-100:    #fee7d6;
  --color-bg-violet-100:    #f1e9fe;
  --color-bg-aquamarine-100:#e0f4f3;

  /* ---------------------------------------------------------------- *
   * Icons
   * ---------------------------------------------------------------- */
  /* Primary monochrome icon scale */
  --color-icon-primary-0:   #ffffff;
  --color-icon-primary-100: #deecff;
  --color-icon-primary-300: #a1bfff;
  --color-icon-primary-700: #3249cd;
  --color-icon-primary-800: #666370;
  --color-icon-primary-900: #454663;
  --color-icon-primary-980: #25242d;

  /* Accent icon dots (illustrations / decorative) */
  --color-icon-aquamarine-300: #73c7c7;
  --color-icon-blue-400:       #7099ea;
  --color-icon-green-300:      #9ac7a1;
  --color-icon-orange-300:     #fbab80;
  --color-icon-red-400:        #fb6e6f;
  --color-icon-violet-300:     #c8a7fa;
  --color-icon-yellow-300:     #ffd069;

  /* ---------------------------------------------------------------- *
   * Buttons
   * ---------------------------------------------------------------- */
  --color-btn-bg-0:   #ffffff;
  --color-btn-bg-100: #deecff;
  --color-btn-bg-300: #a1bfff;
  --color-btn-bg-700: #3249cd;

  /* ---------------------------------------------------------------- *
   * Borders
   * ---------------------------------------------------------------- */
  --color-border-100: #e8eaf1;
  --color-border-300: #a1bfff;

  /* ---------------------------------------------------------------- *
   * Inputs
   * ---------------------------------------------------------------- */
  --color-input-0:  #ffffff;
  --color-input-50: #f6f6f7;

  /* ---------------------------------------------------------------- *
   * Gradients (component colors used inside CSS gradients)
   * ---------------------------------------------------------------- */
  --color-gradient-blue-300:   #a1bfff;
  --color-gradient-violet-300: #c8a7fa;

  /* ---------------------------------------------------------------- *
   * Typography — font families
   * ---------------------------------------------------------------- */
  --font-primary:   'Jonova', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-accent:    'Ezerovo', Georgia, 'Times New Roman', serif;
  --font-condensed: 'Jonova Condensed', var(--font-primary);

  /* ---------------------------------------------------------------- *
   * Typography — sizes / line heights
   * (token names mirror Figma: text-xs … text-3xl)
   * ---------------------------------------------------------------- */
  --text-xs-size:       14px;
  --text-xs-line:       18px;

  --text-sm-size:       16px;
  --text-sm-line:       20px;

  --text-base-size:     18px;
  --text-base-line:     22px;

  --text-lg-size:       20px;
  --text-lg-line:       24px;

  --text-2xl-size:      24px;
  --text-2xl-line:      28px;

  --text-3xl-size:      28px;
  --text-3xl-line:      32px;

  /* Display sizes — used for hero / large-canvas headlines (Ezerovo). */
  --text-display-1-size: 60px;
  --text-display-1-line: 72px;

  /* Button line-heights are tighter than paragraph (matches Figma). */
  --btn-text-xs-line:   14px;
  --btn-text-sm-line:   16px;
  --btn-text-base-line: 18px;
  --btn-text-lg-line:   20px;

  /* Ezerovo "text-lg" is slightly looser to compensate for serif x-height. */
  --accent-text-lg-line: 26px;

  /* ---------------------------------------------------------------- *
   * Spacing
   * Only 3xs / 2xs / s exist in Figma variables today;
   * the rest are project conventions until designers extend the scale.
   * TODO(design): confirm m / l / xl / 2xl with Figma variables.
   * ---------------------------------------------------------------- */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs:  8px;   /* convention */
  --space-s:   12px;
  --space-m:   16px;  /* convention */
  --space-l:   24px;  /* convention */
  --space-xl:  32px;  /* convention */
  --space-2xl: 48px;  /* convention */
  --space-3xl: 64px;  /* convention */

  /* ---------------------------------------------------------------- *
   * Radii
   * Only `circle` exists in Figma variables today.
   * TODO(design): confirm sm / md / lg with Figma variables.
   * ---------------------------------------------------------------- */
  --radius-sm:     4px;   /* convention */
  --radius-md:     8px;   /* convention */
  --radius-lg:     16px;  /* convention */
  --radius-circle: 999px;

  /* ---------------------------------------------------------------- *
   * Layout
   * ---------------------------------------------------------------- */
  --container-max:    1440px; /* desktop frame width in Figma */
  --container-mobile: 375px;  /* mobile frame width in Figma  */
}