/* ==========================================================================
   SWASLife · Design Tokens
   Central source of truth for color, typography, elevation, and motion.
   Update values here to re-skin the entire site.
   ========================================================================== */

:root {
  /* ---- Brand palette (warm, energetic) ---- */
  --brand-50:      #FFF6EC;
  --brand-100:     #FFE5C2;
  --brand-300:     #FFB56B;
  --brand-500:     #FF7A1A;   /* primary */
  --brand-600:     #E94E1B;   /* primary hover / deep */
  --brand-700:     #C53C10;
  --brand-yellow:  #F7B500;

  /* ---- Neutral ink ---- */
  --ink-900: #121212;
  --ink-800: #1E1E1E;
  --ink-700: #2B2B2B;
  --ink-500: #5B5B5B;
  --ink-300: #B5B5B5;
  --ink-100: #F3F3F1;
  --bg:      #FAFAF7;

  /* ---- Typography ---- */
  --font-sans:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, serif;

  /* ---- Radii ---- */
  --radius-sm:  0.5rem;
  --radius-md:  1rem;
  --radius-lg:  1.5rem;
  --radius-xl:  2rem;
  --radius-pill: 9999px;

  /* ---- Elevation ---- */
  --shadow-soft: 0 20px 60px -20px rgba(233, 78, 27, 0.25);
  --shadow-glow: 0 10px 40px -10px rgba(255, 122, 26, 0.45);
  --shadow-ring: 0 0 0 1px rgba(20, 20, 20, 0.06), 0 20px 40px -20px rgba(20, 20, 20, 0.15);

  /* ---- Motion ---- */
  --ease-out-soft: cubic-bezier(.2, .7, .2, 1);
  --duration-fast: 180ms;
  --duration-base: 550ms;
  --duration-slow: 900ms;

  /* ---- Gradients ---- */
  --brand-gradient: linear-gradient(135deg, #F7B500 0%, #FF7A1A 45%, #E94E1B 100%);
  --brand-gradient-text: linear-gradient(120deg, #F7B500 0%, #FF7A1A 45%, #E94E1B 100%);
  --brand-soft-bg:
    radial-gradient(1200px 600px at 10% -10%, #FFE5C2 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #FFD2B0 0%, transparent 55%);
}