/* ================================================================
   REWVO DESIGN SYSTEM -- tokens.css
   Brand: "Lime Light" v2
   Theme: Light Mode
   Generated: 2026-04-01
   Author: Pixel (Design System Architect)
   Prefix: --rw-
   Color Space: HEX (web-safe, broad compatibility)
   Total Properties: 440+
   ================================================================ */

:root {

  /* ============================================================
     1. COLOR -- Primitives
     ============================================================ */
  --rw-color-ink:             #0A0A0A;
  --rw-color-lime:            #BFFF00;
  --rw-color-canvas:          #FFFFFF;
  --rw-color-surface-dark:    #1A1A1A;
  --rw-color-lime-600:        #9AE600;
  --rw-color-cloud:           #F5F5F5;
  --rw-color-muted:           #525252;
  --rw-color-white:           #FFFFFF;
  --rw-color-black:           #000000;

  /* ============================================================
     1.1 COLOR -- Semantic
     ============================================================ */
  --rw-color-success:         #22C55E;
  --rw-color-warning:         #F59E0B;
  --rw-color-error:           #EF4444;
  --rw-color-info:            #3B82F6;

  /* ============================================================
     1.2 COLOR -- Neutral Scale (12 steps)
     Escala de cinza do Ink ao Canvas para hierarquia visual.
     ============================================================ */
  --rw-neutral-1:             #0A0A0A;
  --rw-neutral-2:             #171717;
  --rw-neutral-3:             #1A1A1A;
  --rw-neutral-4:             #262626;
  --rw-neutral-5:             #404040;
  --rw-neutral-6:             #525252;
  --rw-neutral-7:             #737373;
  --rw-neutral-8:             #A3A3A3;
  --rw-neutral-9:             #D4D4D4;
  --rw-neutral-10:            #E5E5E5;
  --rw-neutral-11:            #F5F5F5;
  --rw-neutral-12:            #FAFAFA;

  /* ============================================================
     1.3 COLOR -- Lime Scale (12 steps)
     Do quase-branco ao lime saturado para versatilidade.
     ============================================================ */
  --rw-lime-1:                #FCFFE6;
  --rw-lime-2:                #F7FFBF;
  --rw-lime-3:                #F0FF8C;
  --rw-lime-4:                #E6FF4D;
  --rw-lime-5:                #D9FF1A;
  --rw-lime-6:                #BFFF00;
  --rw-lime-7:                #ACE600;
  --rw-lime-8:                #9AE600;
  --rw-lime-9:                #84CC00;
  --rw-lime-10:               #6BB300;
  --rw-lime-11:               #529900;
  --rw-lime-12:               #3D7300;

  /* ============================================================
     1.4 COLOR -- Lime Alpha Ladder (14 steps)
     Opacidades de lime para hovers, backgrounds, overlays.
     ============================================================ */
  --rw-lime-a1:               rgba(191, 255, 0, 0.02);
  --rw-lime-a2:               rgba(191, 255, 0, 0.04);
  --rw-lime-a3:               rgba(191, 255, 0, 0.06);
  --rw-lime-a4:               rgba(191, 255, 0, 0.08);
  --rw-lime-a5:               rgba(191, 255, 0, 0.12);
  --rw-lime-a6:               rgba(191, 255, 0, 0.16);
  --rw-lime-a7:               rgba(191, 255, 0, 0.20);
  --rw-lime-a8:               rgba(191, 255, 0, 0.25);
  --rw-lime-a9:               rgba(191, 255, 0, 0.30);
  --rw-lime-a10:              rgba(191, 255, 0, 0.40);
  --rw-lime-a11:              rgba(191, 255, 0, 0.50);
  --rw-lime-a12:              rgba(191, 255, 0, 0.65);
  --rw-lime-a13:              rgba(191, 255, 0, 0.80);
  --rw-lime-a14:              rgba(191, 255, 0, 0.90);

  /* ============================================================
     1.5 COLOR -- Ink Alpha Ladder (14 steps)
     Opacidades de ink para sombras, overlays, dimming.
     ============================================================ */
  --rw-ink-a1:                rgba(10, 10, 10, 0.02);
  --rw-ink-a2:                rgba(10, 10, 10, 0.04);
  --rw-ink-a3:                rgba(10, 10, 10, 0.06);
  --rw-ink-a4:                rgba(10, 10, 10, 0.08);
  --rw-ink-a5:                rgba(10, 10, 10, 0.12);
  --rw-ink-a6:                rgba(10, 10, 10, 0.16);
  --rw-ink-a7:                rgba(10, 10, 10, 0.20);
  --rw-ink-a8:                rgba(10, 10, 10, 0.25);
  --rw-ink-a9:                rgba(10, 10, 10, 0.30);
  --rw-ink-a10:               rgba(10, 10, 10, 0.40);
  --rw-ink-a11:               rgba(10, 10, 10, 0.50);
  --rw-ink-a12:               rgba(10, 10, 10, 0.65);
  --rw-ink-a13:               rgba(10, 10, 10, 0.80);
  --rw-ink-a14:               rgba(10, 10, 10, 0.90);

  /* ============================================================
     1.6 COLOR -- Semantic Aliases
     Tokens abstratos -- troca de theme sem alterar componentes.
     ============================================================ */
  --rw-color-primary:         var(--rw-color-lime);
  --rw-color-accent:          var(--rw-color-lime-600);
  --rw-color-bg:              var(--rw-color-canvas);
  --rw-color-bg-alt:          var(--rw-color-cloud);
  --rw-color-bg-dark:         var(--rw-color-ink);
  --rw-color-bg-surface:      var(--rw-color-surface-dark);
  --rw-color-text:            var(--rw-color-ink);
  --rw-color-text-muted:      var(--rw-color-muted);
  --rw-color-text-inverse:    var(--rw-color-canvas);

  /* ============================================================
     1.7 COLOR -- Surface Levels (8 niveis, light mode)
     Hierarquia de profundidade: Canvas -> Hover.
     ============================================================ */
  --rw-surface-canvas:        #FFFFFF;
  --rw-surface-base:          #FAFAFA;
  --rw-surface-alt:           #F5F5F5;
  --rw-surface-panel:         #F0F0F0;
  --rw-surface-elevated:      #E8E8E8;
  --rw-surface-overlay:       #E0E0E0;
  --rw-surface-hover:         #D6D6D6;
  --rw-surface-dark:          #1A1A1A;

  /* ============================================================
     1.8 COLOR -- Text Semantic Tokens
     ============================================================ */
  --rw-text-base:             #0A0A0A;
  --rw-text-secondary:        #404040;
  --rw-text-tertiary:         #525252;
  --rw-text-muted:            #737373;
  --rw-text-accent:           #529900;
  --rw-text-inverse:          #FFFFFF;

  /* ============================================================
     1.9 COLOR -- State Semantic Backgrounds
     Tints claros para estados sobre Canvas.
     ============================================================ */
  --rw-state-success-bg:      rgba(34, 197, 94, 0.08);
  --rw-state-success-border:  rgba(34, 197, 94, 0.25);
  --rw-state-warning-bg:      rgba(245, 158, 11, 0.08);
  --rw-state-warning-border:  rgba(245, 158, 11, 0.25);
  --rw-state-error-bg:        rgba(239, 68, 68, 0.08);
  --rw-state-error-border:    rgba(239, 68, 68, 0.25);
  --rw-state-info-bg:         rgba(59, 130, 246, 0.08);
  --rw-state-info-border:     rgba(59, 130, 246, 0.25);

  /* ============================================================
     1.10 COLOR -- Interactive State Tokens
     ============================================================ */
  --rw-focus-brand:           0 0 0 2px #FFFFFF, 0 0 0 4px #BFFF00;
  --rw-focus-neutral:         0 0 0 2px #FFFFFF, 0 0 0 4px rgba(10, 10, 10, 0.30);
  --rw-selection-bg:          rgba(191, 255, 0, 0.25);
  --rw-selection-fg:          #0A0A0A;
  --rw-disabled-bg:           rgba(10, 10, 10, 0.04);
  --rw-disabled-fg:           rgba(10, 10, 10, 0.25);

  /* ============================================================
     1.11 COLOR -- Interactive Semantics
     ============================================================ */
  --rw-interactive-hover:     var(--rw-lime-a4);
  --rw-interactive-active:    var(--rw-lime-a6);
  --rw-interactive-focus:     var(--rw-focus-brand);
  --rw-interactive-disabled-opacity: 0.4;

  /* ============================================================
     1.12 COLOR -- Gradient Tokens
     ============================================================ */
  --rw-gradient-hero:         linear-gradient(135deg, #BFFF00 0%, #9AE600 50%, #22C55E 100%);
  --rw-gradient-energy:       linear-gradient(90deg, #BFFF00 0%, #22C55E 100%);
  --rw-gradient-cta:          linear-gradient(135deg, #BFFF00 0%, #ACE600 100%);
  --rw-gradient-card:         linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
  --rw-gradient-skeleton:     linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);
  --rw-gradient-overlay-bottom: linear-gradient(180deg, transparent 0%, rgba(10, 10, 10, 0.60) 100%);
  --rw-gradient-gamification: linear-gradient(135deg, #BFFF00 0%, #84CC00 100%);
  --rw-gradient-dark-section: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%);

  /* ============================================================
     2. TYPOGRAPHY -- Font Families
     ============================================================ */
  --rw-font-heading:          'Space Grotesk', sans-serif;
  --rw-font-body:             'Inter', sans-serif;
  --rw-font-mono:             'Space Mono', monospace;

  /* ============================================================
     2.1 TYPOGRAPHY -- Type Scale (13 levels)
     Cada nivel: size + line-height + letter-spacing.
     ============================================================ */

  /* Display */
  --rw-text-display-size:     4rem;
  --rw-text-display-lh:       1.0;
  --rw-text-display-ls:       -0.03em;

  /* H1 */
  --rw-text-h1-size:          3rem;
  --rw-text-h1-lh:            1.05;
  --rw-text-h1-ls:            -0.025em;

  /* H2 */
  --rw-text-h2-size:          2.5rem;
  --rw-text-h2-lh:            1.1;
  --rw-text-h2-ls:            -0.02em;

  /* H3 */
  --rw-text-h3-size:          2rem;
  --rw-text-h3-lh:            1.15;
  --rw-text-h3-ls:            -0.015em;

  /* H4 */
  --rw-text-h4-size:          1.5rem;
  --rw-text-h4-lh:            1.2;
  --rw-text-h4-ls:            -0.01em;

  /* H5 */
  --rw-text-h5-size:          1.25rem;
  --rw-text-h5-lh:            1.25;
  --rw-text-h5-ls:            -0.005em;

  /* Body LG */
  --rw-text-body-lg-size:     1.125rem;
  --rw-text-body-lg-lh:       1.6;
  --rw-text-body-lg-ls:       0em;

  /* Body */
  --rw-text-body-size:        1rem;
  --rw-text-body-lh:          1.6;
  --rw-text-body-ls:          0em;

  /* Body SM */
  --rw-text-body-sm-size:     0.875rem;
  --rw-text-body-sm-lh:       1.5;
  --rw-text-body-sm-ls:       0em;

  /* Caption */
  --rw-text-caption-size:     0.75rem;
  --rw-text-caption-lh:       1.4;
  --rw-text-caption-ls:       0.01em;

  /* Micro */
  --rw-text-micro-size:       0.625rem;
  --rw-text-micro-lh:         1.3;
  --rw-text-micro-ls:         0.02em;

  /* Data (mono) */
  --rw-text-data-size:        1rem;
  --rw-text-data-lh:          1.2;
  --rw-text-data-ls:          0em;

  /* Data LG (mono) */
  --rw-text-data-lg-size:     2rem;
  --rw-text-data-lg-lh:       1.1;
  --rw-text-data-lg-ls:       -0.01em;

  /* ============================================================
     2.2 TYPOGRAPHY -- Fluid (clamp) Responsive
     ============================================================ */
  --rw-text-display-fluid:    clamp(2.5rem, 5vw + 1rem, 4rem);
  --rw-text-h1-fluid:         clamp(2rem, 4vw + 0.5rem, 3rem);
  --rw-text-h2-fluid:         clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  --rw-text-h3-fluid:         clamp(1.375rem, 2.5vw + 0.5rem, 2rem);
  --rw-text-h4-fluid:         clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);
  --rw-text-data-lg-fluid:    clamp(1.5rem, 3vw + 0.25rem, 2rem);

  /* ============================================================
     2.3 TYPOGRAPHY -- Font Weight Scale (8 steps)
     ============================================================ */
  --rw-font-thin:             100;
  --rw-font-light:            300;
  --rw-font-regular:          400;
  --rw-font-medium:           500;
  --rw-font-semibold:         600;
  --rw-font-bold:             700;
  --rw-font-extrabold:        800;
  --rw-font-black:            900;

  /* ============================================================
     3. SPACING -- Named Semantic Tokens
     ============================================================ */
  --rw-space-2xs:             4px;
  --rw-space-xs:              8px;
  --rw-space-sm:              16px;
  --rw-space-md:              24px;
  --rw-space-lg:              32px;
  --rw-space-xl:              48px;
  --rw-space-2xl:             64px;
  --rw-space-3xl:             96px;

  /* ============================================================
     3.1 SPACING -- Numeric Scale (14 steps, base 4px)
     ============================================================ */
  --rw-space-0:               0px;
  --rw-space-1:               4px;
  --rw-space-2:               8px;
  --rw-space-3:               12px;
  --rw-space-4:               16px;
  --rw-space-5:               20px;
  --rw-space-6:               24px;
  --rw-space-7:               32px;
  --rw-space-8:               40px;
  --rw-space-9:               48px;
  --rw-space-10:              64px;
  --rw-space-11:              96px;
  --rw-space-12:              128px;
  --rw-space-13:              180px;

  /* ============================================================
     4. BORDER -- Width Tokens
     ============================================================ */
  --rw-border-width-thin:     1px;
  --rw-border-width-default:  1px;
  --rw-border-width-medium:   2px;
  --rw-border-width-thick:    3px;

  /* ============================================================
     4.1 BORDER -- Color Tokens
     ============================================================ */
  --rw-border-color-default:  #E5E5E5;
  --rw-border-color-subtle:   #F0F0F0;
  --rw-border-color-strong:   #D4D4D4;
  --rw-border-color-active:   #BFFF00;
  --rw-border-color-hover:    #9AE600;
  --rw-border-color-input:    #E5E5E5;
  --rw-border-color-focus:    #BFFF00;
  --rw-border-color-error:    #EF4444;
  --rw-border-color-success:  #22C55E;
  --rw-border-color-warning:  #F59E0B;
  --rw-border-color-info:     #3B82F6;
  --rw-border-color-dark:     rgba(255, 255, 255, 0.08);

  /* ============================================================
     4.2 BORDER -- Shorthand Tokens
     ============================================================ */
  --rw-border-default:        1px solid #E5E5E5;
  --rw-border-subtle:         1px solid #F0F0F0;
  --rw-border-strong:         1px solid #D4D4D4;
  --rw-border-active:         1px solid #BFFF00;
  --rw-border-dark-surface:   1px solid rgba(255, 255, 255, 0.08);

  /* ============================================================
     4.3 BORDER -- Radius Scale (8 steps)
     ============================================================ */
  --rw-radius-none:           0px;
  --rw-radius-xs:             4px;
  --rw-radius-sm:             8px;
  --rw-radius-md:             12px;
  --rw-radius-lg:             16px;
  --rw-radius-xl:             24px;
  --rw-radius-2xl:            32px;
  --rw-radius-pill:           9999px;
  --rw-radius-full:           9999px;

  /* ============================================================
     5. SHADOW -- Elevation Scale
     ============================================================ */
  --rw-shadow-xs:             0 1px 2px rgba(0, 0, 0, 0.04);
  --rw-shadow-sm:             0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --rw-shadow-md:             0 4px 12px rgba(0, 0, 0, 0.08);
  --rw-shadow-lg:             0 8px 24px rgba(0, 0, 0, 0.10);
  --rw-shadow-xl:             0 16px 40px rgba(0, 0, 0, 0.12);
  --rw-shadow-2xl:            0 24px 56px rgba(0, 0, 0, 0.16);

  /* ============================================================
     5.1 SHADOW -- Component-Specific
     ============================================================ */
  --rw-shadow-card:           0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --rw-shadow-card-hover:     0 8px 24px rgba(0, 0, 0, 0.10);
  --rw-shadow-dropdown:       0 4px 16px rgba(0, 0, 0, 0.12);
  --rw-shadow-modal:          0 16px 48px rgba(0, 0, 0, 0.18);
  --rw-shadow-toast:          0 4px 12px rgba(0, 0, 0, 0.10);
  --rw-shadow-tooltip:        0 2px 8px rgba(0, 0, 0, 0.12);
  --rw-shadow-input-focus:    0 0 0 3px rgba(191, 255, 0, 0.20);
  --rw-shadow-btn-primary:    0 2px 8px rgba(191, 255, 0, 0.25);
  --rw-shadow-btn-primary-hover: 0 4px 16px rgba(191, 255, 0, 0.35);

  /* ============================================================
     5.2 SHADOW -- Lime Glow (brand highlight)
     ============================================================ */
  --rw-glow-lime:             0 0 24px rgba(191, 255, 0, 0.15);
  --rw-glow-lime-soft:        0 0 8px rgba(191, 255, 0, 0.08);
  --rw-glow-lime-strong:      0 0 32px rgba(191, 255, 0, 0.25);
  --rw-glow-lime-text:        0 0 12px rgba(191, 255, 0, 0.40);

  /* ============================================================
     6. MOTION -- Duration Scale (7 steps)
     ============================================================ */
  --rw-duration-instant:      0ms;
  --rw-duration-fastest:      75ms;
  --rw-duration-fast:         150ms;
  --rw-duration-normal:       250ms;
  --rw-duration-slow:         400ms;
  --rw-duration-slower:       600ms;
  --rw-duration-slowest:      1000ms;

  /* ============================================================
     6.1 MOTION -- Easing Functions
     ============================================================ */
  --rw-ease-default:          cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --rw-ease-in:               cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --rw-ease-out:              cubic-bezier(0.215, 0.61, 0.355, 1.0);
  --rw-ease-in-out:           cubic-bezier(0.645, 0.045, 0.355, 1.0);
  --rw-ease-spring:           cubic-bezier(0.34, 1.56, 0.64, 1.0);

  /* ============================================================
     6.2 MOTION -- Transition Presets
     Composicoes prontas para componentes.
     ============================================================ */
  --rw-transition-fast:       all 150ms cubic-bezier(0.215, 0.61, 0.355, 1.0);
  --rw-transition-base:       all 250ms cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --rw-transition-slow:       all 400ms cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --rw-transition-hover:      all 150ms cubic-bezier(0.215, 0.61, 0.355, 1.0);
  --rw-transition-enter:      all 250ms cubic-bezier(0.215, 0.61, 0.355, 1.0);
  --rw-transition-exit:       all 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --rw-transition-spring:     transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1.0);
  --rw-transition-color:      color 75ms ease, background-color 75ms ease;
  --rw-transition-scale:      transform 180ms cubic-bezier(0.215, 0.61, 0.355, 1.0);

  /* ============================================================
     6.3 MOTION -- Per-Interaction Type
     ============================================================ */
  --rw-motion-hover:          150ms var(--rw-ease-out);
  --rw-motion-press:          100ms var(--rw-ease-in);
  --rw-motion-open:           250ms var(--rw-ease-out);
  --rw-motion-close:          200ms var(--rw-ease-in);
  --rw-motion-slide:          300ms var(--rw-ease-in-out);
  --rw-motion-fade:           200ms var(--rw-ease-default);
  --rw-motion-bounce:         400ms var(--rw-ease-spring);
  --rw-motion-expand:         250ms var(--rw-ease-out);
  --rw-motion-collapse:       200ms var(--rw-ease-in);

  /* ============================================================
     7. LAYOUT -- Grid System
     ============================================================ */
  --rw-grid-cols:             12;
  --rw-grid-cols-tablet:      8;
  --rw-grid-cols-mobile:      4;
  --rw-grid-gutter:           24px;
  --rw-grid-gutter-mobile:    16px;
  --rw-grid-margin:           auto;
  --rw-grid-margin-tablet:    24px;
  --rw-grid-margin-mobile:    16px;
  --rw-grid-max-width:        1200px;

  /* ============================================================
     7.1 LAYOUT -- Breakpoints (reference)
     ============================================================ */
  --rw-bp-mobile:             375px;
  --rw-bp-mobile-lg:          428px;
  --rw-bp-sm:                 640px;
  --rw-bp-md:                 768px;
  --rw-bp-lg:                 1024px;
  --rw-bp-xl:                 1280px;
  --rw-bp-2xl:                1536px;

  /* ============================================================
     7.2 LAYOUT -- Z-Index Stack
     ============================================================ */
  --rw-z-base:                0;
  --rw-z-raised:              10;
  --rw-z-dropdown:            100;
  --rw-z-sticky:              200;
  --rw-z-overlay:             300;
  --rw-z-modal:               400;
  --rw-z-toast:               500;
  --rw-z-tooltip:             600;
  --rw-z-max:                 9999;

  /* ============================================================
     7.3 LAYOUT -- Container Widths
     ============================================================ */
  --rw-container-sm:          640px;
  --rw-container-md:          768px;
  --rw-container-lg:          1024px;
  --rw-container-xl:          1200px;
  --rw-container-2xl:         1400px;

  /* ============================================================
     7.4 LAYOUT -- Section Spacing
     ============================================================ */
  --rw-section-padding-y:     80px;
  --rw-section-padding-y-sm:  48px;
  --rw-container-px-desktop:  80px;
  --rw-container-px-tablet:   40px;
  --rw-container-px-mobile:   24px;

  /* ============================================================
     7.5 LAYOUT -- Glass & Blur (frosted overlays)
     ============================================================ */
  --rw-blur-soft:             blur(5px);
  --rw-blur-standard:         blur(10px);
  --rw-blur-heavy:            blur(16px);
  --rw-blur-extreme:          blur(24px);
  --rw-glass-light:           rgba(255, 255, 255, 0.60);
  --rw-glass-medium:          rgba(255, 255, 255, 0.75);
  --rw-glass-strong:          rgba(255, 255, 255, 0.90);

  /* ============================================================
     8. COMPONENT -- Buttons
     ============================================================ */

  /* Primary */
  --rw-btn-primary-bg:        var(--rw-color-lime);
  --rw-btn-primary-bg-hover:  var(--rw-lime-7);
  --rw-btn-primary-bg-active: var(--rw-lime-8);
  --rw-btn-primary-text:      var(--rw-color-ink);
  --rw-btn-primary-radius:    var(--rw-radius-pill);
  --rw-btn-primary-padding-y: 14px;
  --rw-btn-primary-padding-x: 28px;
  --rw-btn-primary-weight:    var(--rw-font-semibold);
  --rw-btn-primary-transform: uppercase;
  --rw-btn-primary-tracking:  0.08em;
  --rw-btn-primary-shadow:    var(--rw-shadow-btn-primary);
  --rw-btn-primary-shadow-hover: var(--rw-shadow-btn-primary-hover);
  --rw-btn-primary-font:      var(--rw-font-heading);
  --rw-btn-primary-size:      var(--rw-text-body-sm-size);

  /* Secondary */
  --rw-btn-secondary-bg:      transparent;
  --rw-btn-secondary-bg-hover: var(--rw-ink-a3);
  --rw-btn-secondary-border:  2px solid var(--rw-color-ink);
  --rw-btn-secondary-border-hover: 2px solid var(--rw-color-ink);
  --rw-btn-secondary-text:    var(--rw-color-ink);
  --rw-btn-secondary-radius:  var(--rw-radius-pill);
  --rw-btn-secondary-padding-y: 12px;
  --rw-btn-secondary-padding-x: 24px;
  --rw-btn-secondary-weight:  var(--rw-font-semibold);

  /* Ghost */
  --rw-btn-ghost-bg:          transparent;
  --rw-btn-ghost-bg-hover:    var(--rw-ink-a3);
  --rw-btn-ghost-text:        var(--rw-color-muted);
  --rw-btn-ghost-text-hover:  var(--rw-color-ink);
  --rw-btn-ghost-radius:      var(--rw-radius-sm);
  --rw-btn-ghost-padding-y:   8px;
  --rw-btn-ghost-padding-x:   12px;

  /* Lime Outline */
  --rw-btn-lime-outline-bg:         transparent;
  --rw-btn-lime-outline-bg-hover:   var(--rw-lime-a3);
  --rw-btn-lime-outline-border:     2px solid var(--rw-color-lime);
  --rw-btn-lime-outline-text:       var(--rw-lime-10);
  --rw-btn-lime-outline-text-hover: var(--rw-lime-12);
  --rw-btn-lime-outline-radius:     var(--rw-radius-pill);

  /* Danger */
  --rw-btn-danger-bg:         var(--rw-color-error);
  --rw-btn-danger-bg-hover:   #DC2626;
  --rw-btn-danger-text:       var(--rw-color-white);
  --rw-btn-danger-radius:     var(--rw-radius-pill);

  /* Button Sizes */
  --rw-btn-sm-height:         32px;
  --rw-btn-sm-padding-y:      6px;
  --rw-btn-sm-padding-x:      16px;
  --rw-btn-sm-font-size:      var(--rw-text-caption-size);
  --rw-btn-md-height:         40px;
  --rw-btn-md-padding-y:      10px;
  --rw-btn-md-padding-x:      20px;
  --rw-btn-md-font-size:      var(--rw-text-body-sm-size);
  --rw-btn-lg-height:         48px;
  --rw-btn-lg-padding-y:      14px;
  --rw-btn-lg-padding-x:      28px;
  --rw-btn-lg-font-size:      var(--rw-text-body-size);
  --rw-btn-xl-height:         56px;
  --rw-btn-xl-padding-y:      16px;
  --rw-btn-xl-padding-x:      32px;
  --rw-btn-xl-font-size:      var(--rw-text-body-lg-size);

  /* ============================================================
     8.1 COMPONENT -- Cards
     ============================================================ */
  --rw-card-bg:               var(--rw-color-canvas);
  --rw-card-bg-hover:         var(--rw-surface-base);
  --rw-card-border:           var(--rw-border-default);
  --rw-card-border-hover:     1px solid var(--rw-color-lime);
  --rw-card-radius:           var(--rw-radius-md);
  --rw-card-radius-lg:        var(--rw-radius-lg);
  --rw-card-shadow:           var(--rw-shadow-card);
  --rw-card-shadow-hover:     var(--rw-shadow-card-hover);
  --rw-card-padding:          var(--rw-space-6);
  --rw-card-padding-sm:       var(--rw-space-4);
  --rw-card-padding-lg:       var(--rw-space-8);
  --rw-card-gap:              var(--rw-space-4);

  /* ============================================================
     8.2 COMPONENT -- Inputs
     ============================================================ */
  --rw-input-bg:              var(--rw-color-canvas);
  --rw-input-bg-disabled:     var(--rw-surface-alt);
  --rw-input-border:          var(--rw-border-default);
  --rw-input-border-hover:    1px solid var(--rw-border-color-strong);
  --rw-input-border-focus:    1px solid var(--rw-color-lime);
  --rw-input-border-error:    1px solid var(--rw-color-error);
  --rw-input-radius:          var(--rw-radius-sm);
  --rw-input-padding-y:       12px;
  --rw-input-padding-x:       16px;
  --rw-input-font:            var(--rw-font-body);
  --rw-input-font-size:       var(--rw-text-body-size);
  --rw-input-text:            var(--rw-color-ink);
  --rw-input-placeholder:     var(--rw-text-muted);
  --rw-input-focus-ring:      var(--rw-shadow-input-focus);
  --rw-input-height-sm:       32px;
  --rw-input-height-md:       40px;
  --rw-input-height-lg:       48px;

  /* ============================================================
     8.3 COMPONENT -- Badges
     ============================================================ */
  --rw-badge-sm-height:       20px;
  --rw-badge-sm-padding:      0 6px;
  --rw-badge-sm-font-size:    var(--rw-text-micro-size);
  --rw-badge-md-height:       24px;
  --rw-badge-md-padding:      0 8px;
  --rw-badge-md-font-size:    var(--rw-text-caption-size);
  --rw-badge-lg-height:       28px;
  --rw-badge-lg-padding:      0 10px;
  --rw-badge-lg-font-size:    var(--rw-text-body-sm-size);
  --rw-badge-radius:          var(--rw-radius-pill);
  --rw-badge-weight:          var(--rw-font-medium);

  /* Badge Variants */
  --rw-badge-lime-bg:         var(--rw-color-lime);
  --rw-badge-lime-text:       var(--rw-color-ink);
  --rw-badge-dark-bg:         var(--rw-color-ink);
  --rw-badge-dark-text:       var(--rw-color-canvas);
  --rw-badge-outline-bg:      transparent;
  --rw-badge-outline-border:  1px solid #E5E5E5;
  --rw-badge-outline-text:    var(--rw-color-muted);
  --rw-badge-success-bg:      #ECFDF5;
  --rw-badge-success-text:    #16A34A;
  --rw-badge-warning-bg:      #FFFBEB;
  --rw-badge-warning-text:    #D97706;
  --rw-badge-error-bg:        #FEF2F2;
  --rw-badge-error-text:      #DC2626;
  --rw-badge-info-bg:         #EFF6FF;
  --rw-badge-info-text:       #2563EB;

  /* ============================================================
     8.4 COMPONENT -- Campaign Card (Rewvo-specific)
     ============================================================ */
  --rw-campaign-bg:           var(--rw-color-canvas);
  --rw-campaign-border:       var(--rw-border-default);
  --rw-campaign-border-active: 1px solid var(--rw-color-lime);
  --rw-campaign-radius:       var(--rw-radius-lg);
  --rw-campaign-padding:      var(--rw-space-5);
  --rw-campaign-shadow:       var(--rw-shadow-card);
  --rw-campaign-shadow-hover: var(--rw-shadow-card-hover);
  --rw-campaign-status-active-bg:   #ECFDF5;
  --rw-campaign-status-active-text: #16A34A;
  --rw-campaign-status-paused-bg:   #FFFBEB;
  --rw-campaign-status-paused-text: #D97706;
  --rw-campaign-status-ended-bg:    var(--rw-surface-alt);
  --rw-campaign-status-ended-text:  var(--rw-text-muted);
  --rw-campaign-metric-font:  var(--rw-font-mono);
  --rw-campaign-metric-size:  var(--rw-text-data-lg-size);
  --rw-campaign-metric-color: var(--rw-color-ink);

  /* ============================================================
     8.5 COMPONENT -- XP Bar (gamification)
     ============================================================ */
  --rw-xp-bar-height:         8px;
  --rw-xp-bar-height-lg:      12px;
  --rw-xp-bar-bg:             var(--rw-surface-alt);
  --rw-xp-bar-radius:         var(--rw-radius-pill);
  --rw-xp-bar-fill-start:     var(--rw-color-lime);
  --rw-xp-bar-fill-end:       var(--rw-color-lime-600);
  --rw-xp-bar-gradient:       linear-gradient(90deg, var(--rw-xp-bar-fill-start), var(--rw-xp-bar-fill-end));
  --rw-xp-bar-shadow:         var(--rw-glow-lime-soft);
  --rw-xp-label-font:         var(--rw-font-mono);
  --rw-xp-label-size:         var(--rw-text-caption-size);
  --rw-xp-label-weight:       var(--rw-font-bold);
  --rw-xp-label-color:        var(--rw-lime-10);

  /* ============================================================
     8.6 COMPONENT -- Streak (gamification)
     ============================================================ */
  --rw-streak-active:         var(--rw-color-lime);
  --rw-streak-inactive:       #E5E5E5;
  --rw-streak-dot-size:       12px;
  --rw-streak-dot-size-lg:    16px;
  --rw-streak-dot-gap:        var(--rw-space-2);
  --rw-streak-glow:           var(--rw-glow-lime-soft);
  --rw-streak-label-font:     var(--rw-font-mono);
  --rw-streak-label-size:     var(--rw-text-caption-size);
  --rw-streak-label-color:    var(--rw-text-muted);

  /* ============================================================
     8.7 COMPONENT -- Level Display (gamification)
     ============================================================ */
  --rw-level-font:            var(--rw-font-mono);
  --rw-level-weight:          var(--rw-font-bold);
  --rw-level-size:            var(--rw-text-data-size);
  --rw-level-size-lg:         var(--rw-text-data-lg-size);
  --rw-level-color:           var(--rw-color-ink);
  --rw-level-accent:          var(--rw-lime-10);

  /* ============================================================
     8.8 COMPONENT -- Gamification Badge Tiers
     ============================================================ */
  --rw-badge-tier-bronze:     #CD7F32;
  --rw-badge-tier-bronze-bg:  rgba(205, 127, 50, 0.10);
  --rw-badge-tier-silver:     #A0A0A0;
  --rw-badge-tier-silver-bg:  rgba(160, 160, 160, 0.10);
  --rw-badge-tier-gold:       #FFD700;
  --rw-badge-tier-gold-bg:    rgba(255, 215, 0, 0.10);
  --rw-badge-tier-lime:       var(--rw-color-lime);
  --rw-badge-tier-lime-bg:    var(--rw-lime-a4);

  /* ============================================================
     8.9 COMPONENT -- Tooltip
     ============================================================ */
  --rw-tooltip-bg:            var(--rw-color-ink);
  --rw-tooltip-text:          var(--rw-color-canvas);
  --rw-tooltip-radius:        var(--rw-radius-sm);
  --rw-tooltip-padding:       6px 10px;
  --rw-tooltip-font-size:     var(--rw-text-caption-size);
  --rw-tooltip-shadow:        var(--rw-shadow-tooltip);
  --rw-tooltip-max-width:     240px;
  --rw-tooltip-arrow-size:    6px;

  /* ============================================================
     8.10 COMPONENT -- Modal / Dialog
     ============================================================ */
  --rw-modal-bg:              var(--rw-color-canvas);
  --rw-modal-radius:          var(--rw-radius-lg);
  --rw-modal-shadow:          var(--rw-shadow-modal);
  --rw-modal-padding:         var(--rw-space-6);
  --rw-modal-max-width:       560px;
  --rw-modal-backdrop:        rgba(10, 10, 10, 0.50);
  --rw-modal-backdrop-blur:   var(--rw-blur-soft);
  --rw-modal-header-gap:      var(--rw-space-4);
  --rw-modal-footer-gap:      var(--rw-space-3);

  /* ============================================================
     8.11 COMPONENT -- Toast / Notification
     ============================================================ */
  --rw-toast-bg:              var(--rw-color-canvas);
  --rw-toast-border:          var(--rw-border-default);
  --rw-toast-radius:          var(--rw-radius-md);
  --rw-toast-shadow:          var(--rw-shadow-toast);
  --rw-toast-padding:         var(--rw-space-4);
  --rw-toast-max-width:       420px;
  --rw-toast-icon-size:       20px;

  /* ============================================================
     8.12 COMPONENT -- Avatar
     ============================================================ */
  --rw-avatar-sm:             32px;
  --rw-avatar-md:             40px;
  --rw-avatar-lg:             56px;
  --rw-avatar-xl:             80px;
  --rw-avatar-radius:         var(--rw-radius-full);
  --rw-avatar-border:         2px solid var(--rw-color-canvas);
  --rw-avatar-bg:             var(--rw-surface-alt);
  --rw-avatar-text:           var(--rw-text-muted);

  /* ============================================================
     8.13 COMPONENT -- Table
     ============================================================ */
  --rw-table-header-bg:       var(--rw-surface-alt);
  --rw-table-header-text:     var(--rw-text-muted);
  --rw-table-header-weight:   var(--rw-font-medium);
  --rw-table-header-size:     var(--rw-text-caption-size);
  --rw-table-row-bg:          var(--rw-color-canvas);
  --rw-table-row-bg-alt:      var(--rw-surface-base);
  --rw-table-row-bg-hover:    var(--rw-lime-a2);
  --rw-table-cell-padding:    var(--rw-space-3) var(--rw-space-4);
  --rw-table-border:          1px solid var(--rw-border-color-subtle);

  /* ============================================================
     8.14 COMPONENT -- Sidebar / Navigation
     ============================================================ */
  --rw-sidebar-width:         260px;
  --rw-sidebar-width-collapsed: 72px;
  --rw-sidebar-bg:            var(--rw-color-canvas);
  --rw-sidebar-border:        1px solid var(--rw-border-color-subtle);
  --rw-sidebar-item-padding:  10px 16px;
  --rw-sidebar-item-radius:   var(--rw-radius-sm);
  --rw-sidebar-item-hover-bg: var(--rw-lime-a3);
  --rw-sidebar-item-active-bg: var(--rw-lime-a5);
  --rw-sidebar-item-active-text: var(--rw-color-ink);
  --rw-sidebar-item-text:     var(--rw-text-secondary);
  --rw-sidebar-icon-size:     20px;

  /* ============================================================
     8.15 COMPONENT -- Scrollbar
     ============================================================ */
  --rw-scrollbar-width:       6px;
  --rw-scrollbar-track:       transparent;
  --rw-scrollbar-thumb:       var(--rw-neutral-9);
  --rw-scrollbar-thumb-hover: var(--rw-neutral-7);
  --rw-scrollbar-radius:      var(--rw-radius-pill);

  /* ============================================================
     8.16 COMPONENT -- Skeleton Loading
     ============================================================ */
  --rw-skeleton-bg:           var(--rw-surface-alt);
  --rw-skeleton-shine:        var(--rw-gradient-skeleton);
  --rw-skeleton-radius:       var(--rw-radius-sm);
  --rw-skeleton-duration:     1.5s;

  /* ============================================================
     8.17 COMPONENT -- Divider
     ============================================================ */
  --rw-divider-color:         var(--rw-border-color-subtle);
  --rw-divider-thickness:     1px;
  --rw-divider-spacing:       var(--rw-space-6);

  /* ============================================================
     9. SEMANTIC -- Background Aliases
     ============================================================ */
  --rw-bg-void:               var(--rw-surface-alt);
  --rw-bg-base:               var(--rw-surface-canvas);
  --rw-bg-surface:            var(--rw-surface-base);
  --rw-bg-elevated:           var(--rw-color-canvas);
  --rw-bg-overlay:            var(--rw-surface-overlay);

  /* ============================================================
     9.1 SEMANTIC -- Foreground Aliases
     ============================================================ */
  --rw-fg-base:               var(--rw-text-base);
  --rw-fg-secondary:          var(--rw-text-secondary);
  --rw-fg-tertiary:           var(--rw-text-tertiary);
  --rw-fg-muted:              var(--rw-text-muted);
  --rw-fg-inverse:            var(--rw-color-canvas);
}

/* ============================================================
   SELECTION
   ============================================================ */
::selection {
  background: var(--rw-selection-bg);
  color: var(--rw-selection-fg);
}

/* ============================================================
   SCROLLBAR STYLING
   ============================================================ */
::-webkit-scrollbar {
  width: var(--rw-scrollbar-width);
}
::-webkit-scrollbar-track {
  background: var(--rw-scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--rw-scrollbar-thumb);
  border-radius: var(--rw-scrollbar-radius);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--rw-scrollbar-thumb-hover);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   BREAKPOINTS (reference -- use in @media queries)
   @media (min-width: 640px)  { sm }
   @media (min-width: 768px)  { md / tablet }
   @media (min-width: 1024px) { lg / desktop }
   @media (min-width: 1280px) { xl / desktop-lg }
   @media (min-width: 1536px) { 2xl / wide }
   ============================================================ */