/* =============================================
   SMARTBUILD — Design Tokens & CSS Variables
   ============================================= */

:root {
  /* ---- Colors ---- */
  --color-yellow:       #F2DE4D;
  --color-yellow-hover: #e6d342;
  --color-alabaster:    #F5F5F2;
  --color-white:        #FFFFFF;
  --color-dark:         #2C2C2C;
  --color-graphite:     #404042;
  --color-brown:        #815D29;
  --color-black:        #000000;

  /* Validation states */
  --color-focus:        #4D6BF2;
  --color-error:        #F44242;
  --color-error-focus:  #F24D50;

  /* Semi-transparent */
  --color-glass:        rgba(243, 246, 242, 0.1);
  --color-overlay-dark: rgba(0, 0, 0, 0.5);

  /* Bank brand colors */
  --color-alfa:         #EE2A23;
  --color-domrf:        #454545;
  --color-vtb:          #0A2973;
  --color-domclick:     #148F82;

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

  /* H2 */
  --h2-size:            48px;
  --h2-weight:          600;
  --h2-line-height:     1.1;
  --h2-letter-spacing:  -2.4px;

  /* H3 */
  --h3-size:            36px;
  --h3-weight:          600;
  --h3-line-height:     1.15;
  --h3-letter-spacing:  -1.44px;

  /* H4 */
  --h4-size:            28px;
  --h4-weight:          600;
  --h4-line-height:     1.2;
  --h4-letter-spacing:  -0.84px;

  /* H5 */
  --h5-size:            22px;
  --h5-weight:          600;
  --h5-line-height:     1.2;
  --h5-letter-spacing:  -0.44px;

  /* Body */
  --body-size:          18px;
  --body-weight:        400;
  --body-line-height:   1.4;
  --body-letter-spacing: -0.18px;

  /* Button text */
  --btn-size:           16px;
  --btn-weight:         600;
  --btn-line-height:    1;
  --btn-letter-spacing: -0.16px;

  /* Small / Caption */
  --small-size:         14px;
  --small-weight:       400;
  --small-line-height:  1.4;

  /* ---- Layout ---- */
  --page-max-width:     1920px;
  --content-padding:    60px;
  --content-width:      1800px;
  --section-padding-y:  120px;

  /* ---- Border radius ---- */
  --radius-xl:          50px;
  --radius-lg:          40px;
  --radius-md:          20px;
  --radius-sm:          12px;
  --radius-xs:          8px;

  /* ---- Transitions ---- */
  --transition-fast:    0.2s ease;
  --transition-base:    0.3s ease;
}