/* ============================================================
   Pondo: Brand tokens
   Patterned on the SimVida tokens system.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---- Brand dots (sampled from the official pondo_logo.svg) ---- */
  --brand-magenta: #BA3E65;
  --brand-orange:  #DB6533;
  --brand-yellow:  #F8C944;
  --brand-lime:    #AFC73F;
  --brand-blue:    #4C95A8;

  /* ---- Primary CTA (uses brand magenta) ---- */
  --brand-primary:          #BA3E65;
  --brand-primary-hover:    #A33558;
  --brand-primary-active:   #8C2D4B;
  --brand-primary-disabled: #E0B5C3;

  /* ---- Ink + surfaces ---- */
  --brand-ink:        #2A2A2A;
  --brand-ink-soft:   #6B6B6B;
  --brand-ink-faint:  #9A9A9A;
  --brand-bg:         #FFFFFF;
  --brand-bg-alt:     #F8F8F8;
  --brand-bg-dim:     #F0F0F0;
  --brand-rule:       #E5E5E5;
  --brand-rule-soft:  #EFEFEF;

  /* ---- Feedback hues ---- */
  --brand-success:    var(--brand-lime);
  --brand-error:      #DB624F;
  --brand-error-bg:   #FDF2F0;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.10);

  /* ---- Type ---- */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Type scale ---- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  80px;

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

  /* ---- Radius ---- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;
  --r-card: 20px;
  --r-btn:  4px;

  /* ---- Container ---- */
  --container-max: 1120px;
  --gutter: 24px;

  /* ---- Easing ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}