/* =====================================================================
   5omsa — core: the design tokens and the page transitions, shared by the store
   (design-system.css, which needs this first) and the swipe app's lean page (app.css).
   The try-on widget reads the --omsa-tryon-* tokens. Change the look here, never in the plugin.
   ===================================================================== */

/* ----------------------------------------------------- design tokens */
:root {
  --omsa-hot-1: #ff4d00;        /* energy gradient start */
  --omsa-hot-2: #e70014;        /* brand red / gradient end */
  --omsa-hot: linear-gradient(90deg, var(--omsa-hot-1), var(--omsa-hot-2));
  --omsa-red: #e70014;
  --omsa-red-ink: #c00011;
  --omsa-ink: #111317;          /* near-black text, ink buttons */
  --omsa-ink-soft: #5b5f66;     /* secondary text */
  --omsa-ink-faint: #9a9ca1;    /* meta, strike price, idle tabs */
  --omsa-paper: #ffffff;        /* cards, sheets */
  --omsa-surface: #f4f5f6;      /* app background */
  --omsa-fill: #eef0f2;         /* pressed / selected fills */
  --omsa-line: #e6e8eb;
  --omsa-amber: #ff9500;        /* rating stars */
  --omsa-ok: #0f9d58;           /* in stock, saved */

  --omsa-display: "Archivo", system-ui, sans-serif;
  --omsa-display-x: "Archivo", system-ui, sans-serif; /* heavy (900) price/headings */
  --omsa-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --omsa-r-xs: 8px;
  --omsa-r-sm: 12px;
  --omsa-r: 16px;
  --omsa-r-lg: 22px;
  --omsa-shadow-1: 0 1px 2px rgba(17,19,23,.06);
  --omsa-shadow-2: 0 10px 26px rgba(17,19,23,.12);
  --omsa-shadow-bar: 0 -8px 24px rgba(17,19,23,.06);
  --omsa-glow: 0 8px 22px rgba(231,0,20,.30);
  --omsa-ease: cubic-bezier(.2, .7, .2, 1);
  --omsa-spring: cubic-bezier(.34, 1.56, .64, 1);
  --omsa-glass: rgba(255,255,255,.9);

  --omsa-tabbar-h: 60px;
  --omsa-safe-b: env(safe-area-inset-bottom, 0px);

  /* Try-on widget skin. The 5omsa Try-On widget reads these, so the swipe deck,
     photo upload and "See it on you" button match the store. Change the look here,
     never in the plugin. */
  --omsa-tryon-paper: var(--omsa-surface);
  --omsa-tryon-surface: var(--omsa-paper);
  --omsa-tryon-ink: var(--omsa-ink);
  --omsa-tryon-muted: var(--omsa-ink-soft);
  --omsa-tryon-line: var(--omsa-line);
  --omsa-tryon-accent: var(--omsa-hot-2);
  --omsa-tryon-accent-fill: var(--omsa-hot);
  --omsa-tryon-on-accent: #fff;
  --omsa-tryon-accent-glow: var(--omsa-glow);
  --omsa-tryon-skip: var(--omsa-ink);
  --omsa-tryon-error: var(--omsa-red-ink);
  --omsa-tryon-radius: 20px;
  --omsa-tryon-radius-control: 999px;
  --omsa-tryon-shadow: var(--omsa-shadow-2);
  --omsa-tryon-font: var(--omsa-body);
  --omsa-tryon-font-display: var(--omsa-display);
}

html { -webkit-tap-highlight-color: transparent; }

/* ----------------------------------------------------- page transitions (native-feeling navigation) */
/* Same-site navigations move like an app's screens; the header and tab bar stay put; the tapped
   product photo morphs into the product page photo (named by app-shell.js). On phones a page
   you open slides in from the right over the last one, which slips left and dims; back plays
   it in reverse; tabs cross-fade at once. The head script in inc/app-shell.php says which
   (html.omsa-vt-forward / -back / -tab / -sheet). Desktop keeps a short cross-fade. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
.omsa-vt-tab::view-transition-old(root), .omsa-vt-tab::view-transition-new(root) { animation-duration: 140ms; }
.omsa-vt-sheet::view-transition-old(root), .omsa-vt-sheet::view-transition-new(root) { animation-duration: 200ms; }
@media (max-width: 992px) {
  .omsa-vt-forward::view-transition-old(root) { animation: omsa-vt-stay-left 360ms cubic-bezier(.2, .8, .2, 1) both; mix-blend-mode: normal; }
  .omsa-vt-forward::view-transition-new(root) { animation: omsa-vt-in-right 360ms cubic-bezier(.2, .8, .2, 1) both; mix-blend-mode: normal; box-shadow: -10px 0 30px rgba(17,19,23,.14); }
  .omsa-vt-back::view-transition-old(root) { z-index: 1; animation: omsa-vt-out-right 320ms cubic-bezier(.3, .7, .2, 1) both; mix-blend-mode: normal; box-shadow: -10px 0 30px rgba(17,19,23,.14); }
  .omsa-vt-back::view-transition-new(root) { animation: omsa-vt-from-left 320ms cubic-bezier(.3, .7, .2, 1) both; mix-blend-mode: normal; }
}
@keyframes omsa-vt-in-right { from { transform: translateX(100%); } }
@keyframes omsa-vt-stay-left { to { transform: translateX(-26%); filter: brightness(.86); } }
@keyframes omsa-vt-out-right { to { transform: translateX(100%); } }
@keyframes omsa-vt-from-left { from { transform: translateX(-26%); filter: brightness(.86); } }
#masthead { view-transition-name: omsa-header; }
.omsa-tabbar { view-transition-name: omsa-tabbar; }
/* into a page without the tab bar (a design, the cart) or back out of it: the bar moves with
   its page, like an app's, instead of fading on its own over the next one (inc/app-shell.php) */
.omsa-vt-solo .omsa-tabbar { view-transition-name: none; }
/* between two tab pages the bar is the same bar: the new one shows at once (its pill already
   slid there on the tap), instead of two glass copies fading through each other */
::view-transition-group(omsa-tabbar) { animation: none; }
::view-transition-old(omsa-tabbar):not(:only-child) { display: none; }
::view-transition-new(omsa-tabbar):not(:only-child) { animation: none; }
/* The swipe page comes up over the store like a sheet and goes back down when left; the tab
   bar fades as it goes. */
.omsa-app-page .omsa-root.omsa-inline > .omsa-sheet { view-transition-name: omsa-swipe; }
::view-transition-new(omsa-swipe) { animation: omsa-vt-up 300ms cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-old(omsa-swipe) { animation: omsa-vt-down 220ms cubic-bezier(.4, 0, 1, 1) both; }
@keyframes omsa-vt-up { from { transform: translateY(7%); opacity: 0; } }
@keyframes omsa-vt-down { to { transform: translateY(7%); opacity: 0; } }