/* FELOW Boutique Gym — Design Tokens
   Warna di-anchor ke logo brand asli (#C62535, sampled dari IG @felowgym.id).
   Brand: Move · Grow · Glow — warm, supportive, empowering, female-first. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand (rose-crimson dari logo) ---- */
  --brand-900: #7E1620;
  --brand-700: #A81E2C;   /* pressed / dark */
  --brand-600: #C62535;   /* PRIMARY — warna logo asli */
  --brand-500: #E14256;   /* hover / gradient */
  --brand-300: #F4A6B0;   /* soft */
  --brand-100: #FCE3E6;   /* blush surface */
  --brand-50:  #FFF5F6;   /* tint paling terang */
  --blush:     #FFE8E7;   /* warna monogram logo */
  --brand-grad: linear-gradient(135deg, #E14256 0%, #C62535 60%, #A81E2C 100%);

  /* ---- Glow accent (achievement / reward — pilar GLOW) ---- */
  --glow-500: #E9B949;
  --glow-100: #FBEFC9;

  /* ---- Neutrals (warm-tinted) ---- */
  --bg:        #FFFBFB;
  --surface:   #FFFFFF;
  --surface-2: #FBF4F5;
  --ink:       #2A1416;   /* teks utama, kontras tinggi di putih */
  --ink-muted: #8A7176;   /* teks sekunder */
  --border:    #F1E3E5;   /* hairline hangat */

  /* ---- Semantic ---- */
  --success: #16A34A;
  --success-bg: #E7F6EC;
  --warning: #E9B949;
  --danger:  #C62535;     /* "KELAS PENUH" pakai brand red (stop) */

  /* ---- Type ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* ---- Radius (friendly, rounded) ---- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ---- Spacing (8pt) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 3px rgba(126,22,32,.06);
  --shadow-md: 0 6px 20px rgba(126,22,32,.10);
  --shadow-lg: 0 14px 40px rgba(126,22,32,.16);

  /* ---- Motion ---- */
  --dur: 220ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Utility classes — dedup inline style yang berulang.
   svg.ic.ic-* dipakai karena .ic di-define di setiap app sebagai 22×22;
   selector ber-specificity lebih tinggi agar override. */
.f1 { flex: 1; }
.mt2 { margin-top: 12px; }
.mt3 { margin-top: 14px; }
.mt4 { margin-top: 16px; }
.mt5 { margin-top: 18px; }
.pt3 { padding-top: 14px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13.5px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.text-brand { color: var(--brand-600); }
.text-brand-7 { color: var(--brand-700); }
.bold { font-weight: 700; }
.w-full { width: 100%; }
.hidden { display: none; }
.p-0 { padding: 0; }
.va-2 { vertical-align: -2px; }
.va-3 { vertical-align: -3px; }
svg.ic.ic-sm    { width: 12px; height: 12px; }
svg.ic.ic-sm-13 { width: 13px; height: 13px; }
svg.ic.ic-md    { width: 14px; height: 14px; }
svg.ic.ic-lg    { width: 15px; height: 15px; }
svg.ic.ic-xl    { width: 18px; height: 18px; }

/* Keyboard accessibility — visible focus rings without polluting mouse interactions */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 6px;
}
button:focus-visible, a:focus-visible, [role="switch"]:focus-visible, [role="button"]:focus-visible {
  outline-offset: 3px;
}