/* ══════════════════════════════════════════════════════════
   Rise Training Club — Design Tokens
   Source: Elementor Global Colors, Global Fonts, Theme Style Settings
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --color-primary:        #061222;
  --color-secondary:      #F3D212;
  --color-accent:         #193F6A;
  --color-text:           #000000;
  --color-white:          #FFFFFF;
  --color-transparent:    #FFFFFF00;
  --color-dark-navy:      #0A1A2F;
  --color-border:         #BFBFBF;
  --color-border-grey:    #CED4DA;
  --color-light-grey:     #D4D4D4;
  --color-overlay-white:  rgba(255, 255, 255, 0.69);
  --color-overlay-dark:   rgba(6, 18, 34, 0.54);
  --color-yellow-tint:    #FFDE114D;

  /* ── Typography — Families ── */
  --font-heading:         'Inter', sans-serif;
  --font-body:            'Poppins', sans-serif;
  --font-footer:          'Roboto Slab', serif;

  /* ── Typography — H1 (Page Hero) ── */
  --font-size-h1:         64px;
  --font-size-h1-laptop:  64px;
  --font-size-h1-tablet:  52px;
  --font-size-h1-mobile:  40px;
  --line-height-h1:       70px;
  --line-height-h1-laptop:70px;
  --line-height-h1-tablet:60px;
  --line-height-h1-mobile:48px;
  --font-weight-h1:       800;

  /* ── Typography — H2 ── */
  --font-size-h2:         54px;
  --font-size-h2-laptop:  54px;
  --font-size-h2-tablet:  44px;
  --font-size-h2-mobile:  32px;
  --line-height-h2:       62px;
  --line-height-h2-laptop:62px;
  --line-height-h2-tablet:52px;
  --line-height-h2-mobile:40px;
  --font-weight-h2:       700;

  /* ── Typography — H3 ── */
  --font-size-h3:         24px;
  --line-height-h3:       32px;
  --font-weight-h3:       700;

  /* ── Typography — Body ── */
  --font-size-body:       16px;
  --font-size-body-mobile:14px;
  --line-height-body:     24px;
  --line-height-body-mobile:20px;
  --font-weight-body:     400;

  /* ── Typography — Accent/Button Text ── */
  --font-size-accent:     16px;
  --line-height-accent:   24px;
  --font-weight-accent:   700;

  /* ── Typography — Footer Links ── */
  --font-size-footer:     16px;
  --font-size-footer-mobile:14px;
  --line-height-footer:   24px;
  --line-height-footer-mobile:20px;

  /* ── Typography — Nav ── */
  --font-size-nav:        14px;
  --line-height-nav:      20px;
  --font-weight-nav:      400;

  /* ── Layout ── */
  --container-width:      1440px;
  --section-padding-y:    100px;
  --section-padding-x:    80px;
  --section-padding-y-laptop: 80px;
  --section-padding-x-laptop: 20px;
  --section-padding-y-tablet: 60px;
  --section-padding-x-tablet: 20px;
  --column-gap:           40px;
  --card-gap:             24px;
  --button-gap:           12px;

  /* ── Breakpoints (reference — used in media queries) ── */
  /* desktop: >1280px | laptop: 1280px | tablet: 768px | mobile: <768px */

  /* ── Hero ── */
  --hero-min-height:      485px;
  --hero-content-max-width: 845px;

  /* ── Buttons — Primary (Accent bg, white text) ── */
  --btn-primary-bg:       var(--color-accent);
  --btn-primary-color:    var(--color-white);
  --btn-primary-hover-bg: var(--color-secondary);
  --btn-primary-hover-color: var(--color-text);
  --btn-radius:           12px;
  --btn-padding:          12px 24px;
  --btn-padding-lg:       14px 24px;
  --btn-font-family:      var(--font-heading);
  --btn-font-size:        16px;
  --btn-font-weight:      700;
  --btn-letter-spacing:   normal;
  --btn-text-transform:   capitalize;

  /* ── Buttons — Secondary (Yellow bg, dark text) ── */
  --btn-secondary-bg:     var(--color-secondary);
  --btn-secondary-color:  var(--color-text);
  --btn-secondary-hover-bg: var(--color-accent);
  --btn-secondary-hover-color: var(--color-white);

  /* ── Header ── */
  --header-bg:            var(--color-white);
  --header-logo-height:   90px;
  --header-logo-height-laptop: 72px;
  --header-padding-bottom: 13px;

  /* ── Icon List ── */
  --icon-list-icon-size:  20px;
  --icon-list-text-indent: 10px;
  --icon-list-space:      16px;

  /* ── Spacing Scale ── */
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 50px;
  --space-3xl: 80px;
  --space-4xl: 100px;

  /* ── Border Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-2xl: 20px;

  /* ── Shadows ── */
  /* none observed in Elementor export */

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