/* ==========================================================================
   Design Tokens — YouthRise
   Extracted from Yutmaru/Alone theme template
   ========================================================================== */

:root {
  /* ---- Colors ---- */
  --color-gold:        #F4B03E;
  --color-gold-light:  #FEF7EC;
  --color-dark:        #151515;
  --color-orange:      #E45C35;
  --color-green:       #009E74;
  --color-border:      #E3E3E3;
  --color-muted:       #999999;
  --color-white:       #FFFFFF;
  --color-black:       #000000;
  --color-body:        #151515;
  --color-overlay:     rgba(0, 0, 0, 0.45);

  /* Progress bar gradient */
  --gradient-progress: linear-gradient(90deg, #FFEA82, #ED6A5A);

  /* ---- Typography ---- */
  --font-heading:  "Roboto Condensed", sans-serif;
  --font-body:     "Roboto", Arial, sans-serif;
  --font-serif:    "Roboto Slab", serif;

  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* Heading sizes — desktop (vw-based with clamp fallbacks) */
  --fs-hero-tag:      clamp(16px, 1.6vw, 24px);
  --fs-hero-title:    clamp(36px, 4vw, 64px);
  --fs-section-tag:   clamp(16px, 1.4vw, 20px);
  --fs-section-title: clamp(32px, 3.4vw, 54px);
  --fs-card-title:    clamp(20px, 1.6vw, 26px);
  --fs-body:          18px;
  --fs-body-small:    16px;
  --fs-button:        18px;
  --fs-nav:           18px;
  --fs-footer-heading: clamp(32px, 3.4vw, 54px);

  /* Line heights */
  --lh-body:     1.67em;
  --lh-heading:  1.2;
  --lh-tight:    1.1;

  /* ---- Spacing ---- */
  --section-py:          65px;
  --section-py-mobile:   45px;
  --card-padding:        40px;
  --container-wide:      1560px;
  --container-content:   1200px;
  --gap-columns:         30px;
  --gap-grid:            30px;
  --widget-spacing:      20px;

  /* ---- Border Radius ---- */
  --radius-card:     30px;
  --radius-button:   30px;
  --radius-counter:  300px 300px 300px 30px;
  --radius-donation: 30px;
  --radius-footer-bottom: 30px 30px 0 0;
  --radius-gallery:  30px;
  --radius-thumb:    15px;
  --radius-circle:   50%;
  --radius-pill:     100px;

  /* ---- Site Top Offset (top bar + header height) ---- */
  --site-top-offset:       112px;

  /* ---- Slider ---- */
  --slider-height:         800px;
  --slider-height-tablet:  580px;
  --slider-height-mobile:  480px;
  --slider-arrow-size:     60px;

  /* ---- Transitions ---- */
  --transition-fast:   0.3s ease;
  --transition-medium: 0.5s ease;
  --transition-slow:   0.8s ease;

  /* ---- Shadows ---- */
  --shadow-card:   0 10px 40px rgba(0, 0, 0, 0.06);
  --shadow-hover:  0 15px 50px rgba(0, 0, 0, 0.1);
  --shadow-header: 0 2px 20px rgba(0, 0, 0, 0.08);
}