/* ==========================================================================
   ZENVello — Design tokens
   ========================================================================== */

:root {
  /* ---- Brand / accent ---- */
  --brand-yellow: #ffd814;
  --brand-yellow-dark: #f7ca00;
  --brand-yellow-darker: #e8b800;
  --brand-black: #111111;
  --brand-ink: #1a1a1a;

  /* ---- Text ---- */
  --text-primary: #17181a;
  --text-body: #3d4045;
  --text-muted: #6b7280;
  --text-faint: #9099a5;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #a9b0bb;

  /* ---- Surfaces ---- */
  --surface: #ffffff;
  --surface-alt: #f7f8fa;
  --surface-soft: #f2f3f5;
  --surface-topbar: #f6f6f6;
  --surface-dark: #17181c;
  --surface-darker: #0f1013;
  --hero-sand: #efe7dd;

  /* ---- Lines ---- */
  --line: #e6e8ec;
  --line-strong: #d8dbe0;
  --line-soft: #eef0f3;

  /* ---- Semantic ---- */
  --price-red: #d61f26;
  --sale-red: #e01f26;
  --badge-new: #1a8f4a;
  --badge-best: #f2600c;
  --star: #ffc400;
  --star-empty: #d9dde3;
  --success: #17924a;
  --info-blue: #2f7fe6;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-pad: 16px;
  --header-h: 87px;

  /* ---- Radius ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 10px 30px rgba(16, 24, 40, 0.12);
  --shadow-card-hover: 0 8px 24px rgba(16, 24, 40, 0.13);

  /* ---- Type ---- */
  --font-primary: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* ---- Motion ---- */
  --t-fast: 0.15s ease;
  --t-base: 0.25s ease;
}