/* ============================================================
   Sosetto Design Tokens
   Single source of truth for colors, type, spacing, motion.
   Reference these CSS variables everywhere; never hardcode.
   ============================================================ */

:root {
  /* ----- Color: Warm Friendly Pastel Palette ----- */
  --c-primary:       #FFD4E5; /* blush - main brand */
  --c-primary-strong:#FFB3D1; /* deeper blush for hover/active */
  --c-primary-soft:  #FFEAF2; /* lighter blush for backgrounds */

  --c-secondary:       #FFF4A3; /* butter - secondary brand */
  --c-secondary-strong:#FFE968;
  --c-secondary-soft:  #FFFAD4;

  --c-accent:       #B5E7D4; /* mint - accent (success-adjacent) */
  --c-accent-strong:#7DCFB5;
  --c-accent-soft:  #E8F8F0;

  /* ----- Neutrals ----- */
  --c-bg:        #FFFCF8; /* off-white warm */
  --c-surface:   #FFFFFF;
  --c-surface-2: #FAF6F1; /* slightly warmer surface */
  --c-border:    #F1E8DD;
  --c-border-strong: #DCCFC0;

  --c-text:       #2A1F1A; /* warm dark, not pure black */
  --c-text-muted: #6F5F55;
  --c-text-soft:  #A6968B;
  --c-text-on-primary: #2A1F1A;

  /* ----- Semantic ----- */
  --c-success:       #7DCFB5;
  --c-success-bg:    #E8F8F0;
  --c-warning:       #F4B860;
  --c-warning-bg:    #FFF3DD;
  --c-danger:        #E07A8B;
  --c-danger-bg:     #FCE7EB;
  --c-info:          #8AB4D9;
  --c-info-bg:       #E8F2FB;

  /* ----- Typography ----- */
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Raleway', 'Nunito', system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-2xs: 0.6875rem; /* 11 */
  --fs-xs:  0.75rem;   /* 12 */
  --fs-sm:  0.875rem;  /* 14 */
  --fs-base:1rem;      /* 16 */
  --fs-md:  1.125rem;  /* 18 */
  --fs-lg:  1.25rem;   /* 20 */
  --fs-xl:  1.5rem;    /* 24 */
  --fs-2xl: 1.875rem;  /* 30 */
  --fs-3xl: 2.25rem;   /* 36 */
  --fs-4xl: 3rem;      /* 48 */
  --fs-5xl: 3.75rem;   /* 60 */

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;

  /* ----- Spacing scale (4px base) ----- */
  --sp-0: 0;
  --sp-1: 0.25rem;  /* 4 */
  --sp-2: 0.5rem;   /* 8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */
  --sp-8: 4rem;     /* 64 */
  --sp-9: 6rem;     /* 96 */

  /* ----- Radius ----- */
  --r-sm: 0.375rem;  /* 6 */
  --r-md: 0.625rem;  /* 10 */
  --r-lg: 1rem;      /* 16 */
  --r-xl: 1.5rem;    /* 24 */
  --r-2xl: 2rem;     /* 32 */
  --r-pill: 999px;
  --r-circle: 50%;

  /* ----- Shadows (soft, layered, warm-tinted) ----- */
  --sh-sm:  0 1px 2px rgba(42, 31, 26, 0.06);
  --sh-md:  0 2px 8px rgba(42, 31, 26, 0.08), 0 1px 2px rgba(42, 31, 26, 0.04);
  --sh-lg:  0 8px 24px rgba(42, 31, 26, 0.10), 0 2px 6px rgba(42, 31, 26, 0.06);
  --sh-xl:  0 16px 40px rgba(42, 31, 26, 0.12);
  --sh-glow:0 0 0 4px rgba(255, 179, 209, 0.35); /* focus ring tinted blush */

  /* ----- Z-index scale ----- */
  --z-base: 0;
  --z-raised: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-tooltip: 3000;

  /* ----- Motion ----- */
  --t-instant: 80ms;
  --t-fast:    150ms;
  --t-base:    240ms;
  --t-slow:    400ms;
  --t-slower:  600ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.5, 0, 0.75, 0);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----- Layout ----- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  --header-h: 64px;
  --tabbar-h: 64px;

  /* ----- Misc ----- */
  --backdrop: rgba(42, 31, 26, 0.45);
}

/* ----- Reduced motion overrides ----- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-instant: 0ms;
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
    --t-slower: 0ms;
  }
}

/* ----- Dark mode placeholder (deferred Phase 2+) ----- */
/* @media (prefers-color-scheme: dark) {
  :root { ... }
} */