/* ==========================================================================
   RepRecap — CSS Custom Properties
   Kinetic Sanctuary dark theme faithful translation from Flutter design system
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     SURFACES
     -------------------------------------------------------------------------- */
  --scaffold:           #0E0E0E;
  --surface:            #131313;
  --surface-low:        #131313;
  --surface-container:  #1A1A1A;
  --surface-high:       #20201F;
  --surface-highest:    #262626;
  --surface-lowest:     #000000;

  /* --------------------------------------------------------------------------
     TEXT
     -------------------------------------------------------------------------- */
  --on-surface:         #E6E1E5;
  --on-surface-variant: #ADADAA;

  /* --------------------------------------------------------------------------
     BRAND — Primary (Atmospheric Blue)
     -------------------------------------------------------------------------- */
  --primary:            #007AFF;
  --primary-hover:      #0056CC;
  --primary-subtle:     rgba(0, 122, 255, 0.08);
  --primary-glow:       rgba(0, 122, 255, 0.15);

  /* --------------------------------------------------------------------------
     SEMANTIC COLORS
     -------------------------------------------------------------------------- */
  --secondary:          #FF7353;  /* calories / heat orange */
  --tertiary:           #BBFFB3;  /* workouts green */
  --error:              #FF453A;
  --stars:              #FFD60A;

  /* --------------------------------------------------------------------------
     GLASSMORPHISM
     -------------------------------------------------------------------------- */
  --glass-bg:           rgba(14, 14, 14, 0.85);
  --glass-border:       rgba(38, 38, 38, 0.5);

  /* --------------------------------------------------------------------------
     SPACING (from AppThemeTokens)
     -------------------------------------------------------------------------- */
  --space-xs:       4px;
  --space-sm:       8px;
  --space-md:       16px;
  --space-lg:       24px;
  --space-xl:       32px;
  --space-section:  32px;
  --space-xxl:      48px;
  --space-hero:     80px;
  --section-py:     96px;   /* generous section padding for web */

  /* --------------------------------------------------------------------------
     BORDER RADIUS
     -------------------------------------------------------------------------- */
  --radius-xs:      8px;
  --radius-sm:      16px;
  --radius-md:      20px;
  --radius-lg:      24px;
  --radius-full:    9999px;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY — Families
     -------------------------------------------------------------------------- */
  --font-display:   'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY — Scale (fluid via clamp)
     -------------------------------------------------------------------------- */
  --text-hero:      clamp(2.75rem, 6vw, 4.5rem);
  --text-h2:        clamp(1.875rem, 3.5vw, 2.75rem);
  --text-h3:        clamp(1.25rem, 2vw, 1.5rem);
  --text-body-lg:   1.125rem;
  --text-body:      1rem;
  --text-sm:        0.875rem;
  --text-xs:        0.75rem;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY — Letter spacing (editorial, from Flutter theme)
     -------------------------------------------------------------------------- */
  --ls-tighter:     -1.5px;
  --ls-tight:       -1.0px;
  --ls-snug:        -0.5px;
  --ls-normal:      0;
  --ls-wide:        0.2px;
  --ls-wider:       0.3px;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY — Line heights
     -------------------------------------------------------------------------- */
  --lh-tight:       1.1;
  --lh-snug:        1.2;
  --lh-normal:      1.5;
  --lh-relaxed:     1.7;

  /* --------------------------------------------------------------------------
     OPACITY SCALE
     -------------------------------------------------------------------------- */
  --opacity-subtle:    0.08;
  --opacity-light:     0.12;
  --opacity-medium:    0.16;
  --opacity-heavy:     0.24;
  --opacity-overlay:   0.60;
  --opacity-disabled:  0.38;

  /* --------------------------------------------------------------------------
     ANIMATION — Durations
     -------------------------------------------------------------------------- */
  --duration-short:    150ms;
  --duration-medium:   300ms;
  --duration-long:     500ms;
  --duration-slow:     800ms;
  --stagger-delay:     60ms;

  /* --------------------------------------------------------------------------
     ANIMATION — Easing curves
     -------------------------------------------------------------------------- */
  --ease-default:      cubic-bezier(0.33, 1, 0.68, 1);
  --ease-emphasized:   cubic-bezier(0.2, 0, 0, 1);
  --ease-enter:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:         cubic-bezier(0.32, 0, 0.67, 0);

  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */
  --container-max:   1200px;
  --container-md:    900px;
  --container-sm:    720px;
  --nav-height:      72px;
  --section-gap:     120px;

}