/* ============================================================
   GLOW — DESIGN TOKENS  (single source of truth)
   Reconstructed from the approved reference board.
   Components must never hard-code values; use these only.
   ============================================================ */
:root{
  /* --- Surfaces ------------------------------------------- */
  --background:     #FFFFFF;
  --surface:        #FFFFFF;
  --surface-soft:   #FFF7FA;
  --board:          #FDF0F3;   /* reference presentation board only */

  /* --- Text ----------------------------------------------- */
  --text-primary:   #111111;
  --text-secondary: #666666;
  --text-muted:     #929292;
  --text-on-brand:  #FFFFFF;

  /* --- Lines ---------------------------------------------- */
  --border:         #E8E8E8;
  --border-soft:    #F1F1F1;

  /* --- Brand ---------------------------------------------- */
  --brand:          #F72572;
  --brand-hover:    #E91E68;
  --brand-soft:     #FFF0F5;
  --brand-line:     #FBD4E3;

  /* --- Semantic ------------------------------------------- */
  --success:        #E9F8EE;
  --success-text:   #18864B;
  --star:           #F5B301;
  --featured-bg:    #FFF6E2;
  --featured-text:  #8A6A12;
  --featured-line:  #F0DFB4;
  --sponsored-bg:   #F3F3F3;
  --sponsored-text: #666666;

  /* --- Device --------------------------------------------- */
  --frame:          #111013;

  /* --- Typography ----------------------------------------- */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-marketing: 'Caveat', cursive;      /* marketing artwork ONLY */

  --fs-page-title:  24px;  --fw-page-title:  700;
  --fs-heading:     20px;  --fw-heading:     700;
  --fs-card-title:  16px;  --fw-card-title:  700;
  --fs-body:        14px;  --fw-body:        400;
  --fs-button:      14px;  --fw-button:      600;
  --fs-meta:        12px;  --fw-meta:        500;
  --fs-label:       11px;  --fw-label:       600;

  --lh-tight: 1.3;
  --lh-snug:  1.4;
  --lh-body:  1.5;

  /* --- Spacing -------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --page-x:  16px;          /* primary horizontal page padding */

  /* --- Radius --------------------------------------------- */
  --radius-card:   12px;
  --radius-button: 10px;
  --radius-input:  10px;
  --radius-image:  10px;
  --radius-pill:   999px;
  --radius-phone:  30px;

  /* --- Elevation (very subtle or none) -------------------- */
  --shadow-card: 0 1px 2px rgba(17,17,17,.04);
  --shadow-none: none;

  /* --- Icons ---------------------------------------------- */
  --icon-sm: 14px;
  --icon-md: 20px;
  --icon-nav: 22px;
  --icon-stroke: 1.75;

  /* --- Layout metrics ------------------------------------- */
  --viewport:   390px;
  --appbar-h:   48px;
  --nav-h:      58px;
  --avatar-sm:  32px;
  --avatar-md:  40px;
  --avatar-lg:  64px;
}