/* common/css/main.css
   Shared cross-app foundational styles (Phase 1 framework refactor)
   Extracted from app-reward-charts.css & app-itinerary-planner.css
   Only neutral, domain-agnostic primitives should live here.
*/

/* Palette & Design Tokens */
@import url("../design/tokens/tokens.css"); /* generated: design-tokens.json -> tokens.css */
/* Legacy variables scheduled for removal after component migration */
:root {
  --color-yellow: var(--ts-color-accent-100); /* @deprecated */
  --color-blue: var(--ts-color-accent-100); /* @deprecated */
  --color-pink: var(--ts-color-brand-reward-yellow-soft); /* @deprecated */
  --color-green: var(--ts-color-state-success-bg); /* @deprecated */
  --color-purple: var(--ts-color-brand-violet-100); /* @deprecated */
  --color-orange: var(--ts-color-yellow-100); /* @deprecated */
  --color-accent: var(--ts-color-action-primary-bg); /* @deprecated */
  --color-bg: var(--ts-color-surface-base); /* @deprecated */
  --color-card: var(--ts-color-surface-card-bg); /* @deprecated */
  --color-shadow: rgba(0,0,0,0.08); /* @deprecated use --ts-shadow-1 */
  --font-family-sitewide: 'Inter', 'Nunito Sans', sans-serif; /* @deprecated use --ts-font-family-sans */
}

body { font-family: var(--ts-font-family-sans, var(--font-family-sitewide)); background: var(--ts-color-surface-base); min-height:100vh; color: var(--ts-color-text-primary); }

/* Gradient background utility */
.custom-bg-main { background: linear-gradient(135deg, var(--ts-color-accent-100) 0%, var(--ts-color-brand-violet-100) 60%, var(--ts-color-brand-reward-yellow-soft) 100%); }

/* Micro Animations */
@keyframes confetti-fall { 0% { transform: translateY(-100px) rotate(-15deg); opacity:0; } 60% { opacity:1; } 100% { transform:translateY(300px) rotate(15deg); opacity:0; } }
@keyframes bounce-in { 0% { transform:scale(.5); opacity:0; } 60% { transform:scale(1.2); opacity:1; } 100% { transform:scale(1); } }
@keyframes sticker-pop { 0% { transform:scale(.2) rotate(-10deg); opacity:0; } 70% { transform:scale(1.1) rotate(10deg); opacity:1; } 100% { transform:scale(1) rotate(0); } }
.confetti { position:absolute; width:24px; height:24px; z-index:100; animation:confetti-fall 1.2s ease-in forwards; }
.bounce-in { animation:bounce-in .6s cubic-bezier(.4,1,.7,1); }
.sticker-pop { animation:sticker-pop .5s cubic-bezier(.4,1,.7,1); }

/* Icon playful tokens */
.icon-playful { width:40px; height:40px; display:inline-block; vertical-align:middle; border-radius:50%; background:var(--color-yellow); box-shadow:0 2px 8px var(--color-shadow); padding:6px; margin:0 8px; transition:background .2s; }
.icon-playful.chore { background:var(--color-blue); }
.icon-playful.reward { background:var(--color-pink); }

/* Sticky Action Toolbar (shared) */
.ts-action-toolbar { position:fixed; left:0; right:0; bottom:0; z-index:40; pointer-events:none; }
.ts-action-toolbar__inner { pointer-events:auto; display:flex; align-items:center; justify-content:center; gap:16px; margin:0 auto 12px; padding:10px 12px; background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 28px rgba(0,0,0,.12); backdrop-filter:blur(6px); border-radius:16px; width:fit-content; }
.ts-action-group { display:inline-flex; gap:10px; }
.ts-action-separator { width:1px; height:28px; background:rgba(0,0,0,.12); }
.has-toolbar-padding { padding-bottom:84px; }

/* Unified button primitive */
.ts-btn { display:inline-flex; align-items:center; gap:8px; background:var(--ts-color-action-primary-bg); color:var(--ts-color-action-primary-fg); border:none; border-radius:var(--ts-radius-interactive,12px); padding:10px 14px; font-weight:600; font-size:var(--ts-font-size-sm,.95rem); line-height:1; box-shadow:var(--ts-shadow-1,0 2px 8px rgba(0,0,0,.10)); cursor:pointer; transition:transform .06s var(--ts-ease-standard), box-shadow .18s var(--ts-ease-standard), background .18s var(--ts-ease-standard); }
.ts-btn:hover { box-shadow:var(--ts-shadow-2,0 4px 16px rgba(0,0,0,.12)); transform:translateY(-1px); background:var(--ts-color-action-primary-bg-hover,var(--ts-color-action-primary-bg)); }
.ts-btn:active { transform:translateY(0); box-shadow:var(--ts-shadow-1,0 2px 8px rgba(0,0,0,.10)); }
.ts-btn__icon { font-size:1.1em; }
.ts-btn__label { letter-spacing:.01em; }
.ts-btn[aria-disabled="true"], .ts-btn:disabled { filter:grayscale(20%); opacity:.7; cursor:not-allowed; transform:none; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.ts-btn--undo { background:var(--ts-color-yellow-500); }
.ts-btn--undo:hover { background:var(--ts-color-yellow-600); }
.ts-btn--share { background:var(--ts-color-accent-500); }
.ts-btn--share:hover { background:var(--ts-color-accent-600); }
.ts-btn--download { background:var(--ts-color-green-500); }
.ts-btn--download:hover { background:var(--ts-color-green-600); }

/* Global Save Indicator */
.ts-global-save { display:flex; align-items:center; justify-content:center; }
.ts-global-save__pill { font-size:12px; line-height:1; padding:6px 12px; border-radius:9999px; font-weight:600; letter-spacing:.25px; border:1px solid transparent; transition:background .25s,color .25s,border-color .25s; }
.ts-global-save__pill--saved { background:var(--ts-color-green-50); color:var(--ts-color-green-700); border-color:var(--ts-color-green-300); }
.ts-global-save__pill--saving { background:var(--ts-color-accent-50); color:var(--ts-color-accent-700); border-color:var(--ts-color-accent-200); }
.ts-global-save__pill--unsaved { background:var(--ts-color-yellow-50); color:var(--ts-color-yellow-700); border-color:var(--ts-color-yellow-300); }
.ts-global-save__pill--error { background:var(--ts-color-red-50); color:var(--ts-color-red-700); border-color:var(--ts-color-red-300); }

/* Mobile toolbar compaction */
@media (max-width:480px){
  .ts-action-toolbar__inner { width:100%; max-width:100%; margin:0; border-radius:0; border-left:none; border-right:none; padding:10px 12px 12px; padding-left:calc(env(safe-area-inset-left) + 12px); padding-right:calc(env(safe-area-inset-right) + 12px); gap:8px; justify-content:space-between; }
  .ts-action-group { gap:8px; flex:1 1 auto; justify-content:space-between; }
  .ts-action-toolbar { overflow-x:visible; }
  .ts-action-separator { display:none; }
  .ts-btn { padding:10px 12px; border-radius:12px; flex:1 1 auto; justify-content:center; }
  .ts-btn__label { display:none; }
}

/* Phablet width adjustments */
@media (max-width:700px) and (min-width:481px){
  .ts-action-toolbar__inner { width:calc(100% - 24px); max-width:100%; margin:0 12px 12px; border-radius:14px; justify-content:space-between; gap:10px; }
  .ts-action-group { gap:10px; }
}