/* ============================================
   GoCheckin Rewards – Design Tokens
   Source: Figma (END-USER-APP---GoCheckin-Rewards)
   ============================================ */

:root {
  /* --- Colors: Brand --- */
  --color-primary:        #a528e3;
  --color-primary-light:  #c76af0;
  --color-primary-dark:   #7d1eb0;

  /* --- Colors: Surface --- */
  --color-surface:            #f3f0f4;
  --color-on-primary:         #fcfcfc;
  --color-white:              #fcfcfc;
  --color-white-pure:         #ffffff;
  --color-sub-surface:        #fcfcfc;
  --color-theme-surface:      #f3f0f4;
  --color-theme-sub-surface:  #fcfcfc;

  /* --- Colors: Content --- */
  --color-content-main:      #222226;
  --color-content-sub-main:  #fcfcfc;
  --color-content-primary:   #a528e3;
  --color-content-muted:     rgba(34, 34, 38, 0.5);

  /* --- Colors: Neutral --- */
  --neutral-10:  #ededef;
  --neutral-20:  #d9d9de;
  --neutral-50:  #9898a0;

  /* --- Colors: Border --- */
  --color-border-weak:     rgba(100, 100, 108, 0.1);
  --color-border-medium:   rgba(100, 100, 108, 0.2);
  --color-border-primary:  #a528e3;

  /* --- Colors: Icon --- */
  --color-icon-main:      #222226;
  --color-icon-sub-main:  #fcfcfc;

  /* --- Colors: Progress / Points --- */
  --color-progress-fill:        #f3b852;
  --color-progress-bg:          rgba(107, 107, 107, 0.1);
  --color-progress-tooltip-bg:  #fff5d7;

  /* --- Colors: Semantic / Component --- */
  --color-rewards-footer:     #f7d46f;
  --color-appointment-bg:     #ffeaf7;
  --color-appointment-accent: #e34eac;

  /* --- Colors: Button glass --- */
  --color-button-glass: rgba(255, 255, 255, 0.2);

  /* --- Gradients --- */
  --gradient-header:        linear-gradient(180deg, #f9d4e8 0%, #ead0f5 45%, #f3f0f4 100%);
  --gradient-flash-sale:    linear-gradient(106deg, #f1d3cd 0%, #f488d1 13%, #aa64e0 100%);
  --gradient-flash-banner:  linear-gradient(90deg, rgba(180, 102, 218, 0.5) 0%, rgba(178, 102, 219, 0) 80%);

  /* --- Typography: Family --- */
  --font-family: 'Zalando Sans SemiExpanded', sans-serif;

  /* --- Typography: Weights --- */
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* --- Typography: Sizes --- */
  --font-size-3xs:   10px;
  --font-size-2xs:   11px;
  --font-size-s:     12px;
  --font-size-xs:    14px;
  --font-size-base:  16px;
  --font-size-xl:    18px;
  --font-size-m:     20px;
  --font-size-l:     24px;
  --font-size-2xl:   28px;

  /* --- Typography: Line Heights --- */
  --line-height-3xs:  10px;
  --line-height-2xs:  12px;
  --line-height-tight: 14px;
  --line-height-s:    16px;
  --line-height-m:    20px;
  --line-height-l:    24px;
  --line-height-xl:   26px;
  --line-height-2xl:  36px;

  /* --- Spacing --- */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 56px;

  /* --- Border Radius --- */
  --radius-xs:   4px;
  --radius-s:    8px;
  --radius-m:    10px;
  --radius-l:    12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-full: 99px;

  /* --- Shadows --- */
  --shadow-card:
    0px 1px 2px rgba(113, 113, 113, 0.1);
  --shadow-card-md:
    0px 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-glass-btn:
    0 0 16px 0 rgba(102, 102, 102, 0.15),
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 16px 16px 0 rgba(123, 113, 130, 0.1);
  --shadow-tooltip:
    0px 0px 8px rgba(0, 0, 0, 0.1);

  /* --- Backdrop Blur --- */
  --backdrop-blur-xs: blur(2px);
  --backdrop-blur-s:  blur(4px);
  --backdrop-blur-m:  blur(8px);
  --backdrop-blur-l:  blur(12px);

  /* --- Transitions --- */
  --transition-fade:  opacity 0.15s;
  --transition-slide: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);

  /* --- Z-Index --- */
  --z-index-screen:  25;
  --z-index-nav:     30;
  --z-index-overlay: 45;
  --z-index-page:    50;

  /* --- Layout --- */
  --app-width:      390px;
  --header-height:  88px;
  --nav-height:     72px;
  --status-bar-h:   44px;
}