/* Maestro Concierge — colour tokens.
   Names mirror the Deals Redesign design doc's custom properties one-to-one.
   Values marked DERIVED are not present in the app theme and were interpolated
   from the surrounding palette — see docs/deals-design-vs-code.md. */

:root {
  /* Surfaces */
  --surface-canvas: #F6F4F0;      /* warm paper — every screen background */
  --surface-default: #FFFFFF;     /* cards, rows, sheets */
  --surface-subtle: #F6F6F6;      /* route box, Closed chip, row-tone heart */
  --surface-sandal: #EAE3D7;      /* reason box, advisor cards, lens track, photo plate */
  --surface-dark: #222222;        /* pricing slab, contrast pill, FAB */
  --surface-dark-cool: #121214;   /* DERIVED — no-photo icon plate */

  /* Text */
  --text-primary: #222222;        /* titles, prices, headlines */
  --text-secondary: #5D5D5D;      /* body copy, bullets, chip-off labels */
  --text-metadata: #888888;       /* meta lines, strike prices, hints */
  --text-accent: #856349;         /* uppercase eyebrows, match metric */
  --text-link: #E9631A;           /* DERIVED — a:hover resolves to primary-600 */

  /* Primary — the Maestro orange ramp */
  --color-primary-50: #FEF6EE;    /* saved-heart plate, tier badge, check circle */
  --color-primary-200: #FCEBD8;   /* handoff pulse-ring border */
  --color-primary-400: #F4B37D;   /* tier dot on dark, chart glyph on slab */
  --color-primary-500: #E9631A;   /* primary pill, heat ON, live dot, saved heart */
  --color-primary-600: #DB521B;   /* check glyph, handoff shield */
  --color-primary-700: #B63D18;   /* urgency copy, deadline, live section title */

  /* Accent — the warm brown ramp */
  --color-accent-200: #DED3C2;    /* DERIVED — hairline on the white logo chip */
  --color-accent-300: #BEA786;    /* Ask Maestro border, pro-tip bullets */
  --color-accent-500: #9C7F5F;    /* DERIVED — defined for completeness */
  --color-accent-600: #856349;    /* sparkle glyph, advisor eyebrow */
  --color-tertiary-900: #62402C;  /* body copy on sandal surfaces */

  /* Status */
  --color-warning-bg: #FFF4ED;    /* deadline chip, stale banner */
  --color-success-bg: #E4FFF4;    /* savings chip, light tone */
  --color-positive-500: #13682D;  /* savings chip text, Sent chip text */
  --color-savings-green: #489766; /* "Save 70%" label, solid savings chip */
  --color-booked-green: #DDEFE6;  /* Sent chip background */

  /* Borders */
  --border-default: #E7E7E7;      /* hairlines, section rules, heat OFF */
  --border-strong: #C9C2B4;       /* grab handle, route line, fine-print dots */

  /* On-dark scale — used inside the pricing slab */
  --on-dark: #FFFFFF;
  --on-dark-body: rgba(255, 255, 255, 0.82);
  --on-dark-muted: rgba(255, 255, 255, 0.55);
  --on-dark-chip: rgba(255, 255, 255, 0.12);
  --on-dark-divider: rgba(255, 255, 255, 0.14);

  /* Photo overlays */
  --photo-chip: rgba(255, 255, 255, 0.92);
  --photo-chip-dark: rgba(34, 34, 34, 0.82);
  --gallery-chip: rgba(18, 18, 20, 0.55);
  --scrim-hero: linear-gradient(180deg, rgba(18,18,20,.42) 0%, rgba(18,18,20,0) 34%, rgba(18,18,20,.82) 100%);
  --scrim-detail: linear-gradient(180deg, rgba(18,18,20,.44) 0%, rgba(18,18,20,0) 100%);
  --scrim-backdrop: rgba(18, 18, 20, 0.42);
}

/* Maestro Concierge — spacing, radius, elevation and motion tokens. */

:root {
  /* Layout rhythm */
  --space-screen-x: 16px;   /* the screen gutter, everywhere */
  --space-section: 24px;    /* between feed blocks */
  --space-card: 10px;       /* between stacked rows */

  /* Radii — a deliberate ladder, largest at the outside */
  --radius-sheet: 26px;     /* bottom-sheet top corners */
  --radius-hero: 22px;      /* hero card, detail title card */
  --radius-card: 20px;      /* rail card, pricing slab, advisor note */
  --radius-row: 18px;       /* list rows, detail cards */
  --radius-inner: 14px;     /* reason box, route box, Maestro's pick */
  --radius-thumb: 13px;     /* 92px row thumbnail */
  --radius-thumb-sm: 12px;  /* 76px shortlist thumbnail */
  --radius-pill: 9999px;

  /* Elevation — only two real steps, plus one for floating controls */
  --shadow-card: 0 2px 10px rgba(38, 38, 38, 0.06);
  --shadow-card-hover: 0 8px 26px rgba(38, 38, 38, 0.14);
  --shadow-row-hover: 0 8px 22px rgba(38, 38, 38, 0.12);
  --shadow-hard-2: 0 4px 14px rgba(18, 18, 20, 0.18);   /* pricing slab, FAB */
  --shadow-hard-5: 0 6px 20px rgba(18, 18, 20, 0.22);   /* DERIVED — floating photo buttons */
  --shadow-sheet: 0 -10px 34px rgba(18, 18, 20, 0.2);
  --shadow-tabbar: 0 6px 24px rgba(38, 38, 38, 0.16);

  /* Motion */
  --ease-standard: cubic-bezier(.2, .8, .2, 1);   /* DERIVED — decelerate */
  --dur-press: 180ms;
  --dur-rise: 320ms;
  --dur-push: 300ms;
  --dur-sheet: 320ms;
  --stagger-row: 55ms;      /* per-index delay on the feed list */
}

/* The four motions the design uses. Nothing animates layout — only
   opacity and transform — so a phone stays at 60fps. */
@keyframes riseIn  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pushIn  { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes sheetUp { from { transform: translateY(101%); }             to { transform: none; } }
@keyframes fadeIn  { from { opacity: 0; }                              to { opacity: 1; } }

/* The live halo — expands out of the demand dot and fades. */
@keyframes pulseRing {
  0%   { opacity: .5; transform: scale(1); }
  75%  { opacity: 0;  transform: scale(2.6); }
  100% { opacity: 0;  transform: scale(2.6); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}