/* Total Wireless — shared prototype design tokens & motion (Emil-style: transform/opacity, ease-out, press scale) */

@font-face {
  font-family: "Galano Grotesque";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../storybook/fonts/galano-grotesque-400.woff2") format("woff2");
}
@font-face {
  font-family: "Galano Grotesque";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../storybook/fonts/galano-grotesque-500.woff2") format("woff2");
}
@font-face {
  font-family: "Galano Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../storybook/fonts/galano-grotesque-700.woff2") format("woff2");
}

:root {
  --background: #f2f2f2;
  --foreground: #000330;
  --card: #ffffff;
  --card-foreground: #000330;
  --primary: #000330;
  --primary-foreground: #ffffff;
  --secondary: #e6e8f5;
  --secondary-foreground: #000330;
  --muted: #f2f2f2;
  --muted-foreground: #666666;
  --accent: #00c8b7;
  --accent-foreground: #000330;
  --destructive: #ee0000;
  --border: #dddad4;
  --input: #dadada;
  --ring: #000330;

  --tw-teal-50: #e6fcf4;
  --tw-teal-400: #00c8b7;
  --tw-teal-600: #007d73;
  --tw-navy-900: #000330;
  --tw-navy-500: #26358b;
  --tw-red-600: #ee0000;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.1);
  --shadow-cart-panel: -4px 0 16px rgba(0, 0, 0, 0.06);
  --shadow-bottom-sheet: 0 -8px 24px rgba(0, 0, 0, 0.12);

  --tw-radius-control: 8px;
  --tw-radius-tile: 12px;
  --tw-radius-hero: 20px;
  --tw-radius-pill: 9999px;
  --tw-button-height: 48px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 160ms;
  --duration-ui: 200ms;
  --duration-sheet: 320ms;

  --bg-overlay: rgba(0, 0, 0, 0.6);
}

html.tw-prototype,
html.tw-prototype body {
  font-family: "Galano Grotesque", Inter, system-ui, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}

/* Press feedback on primary controls */
html.tw-prototype button:not(:disabled),
html.tw-prototype [role="button"]:not(:disabled),
html.tw-prototype .tw-btn {
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
html.tw-prototype button:not(:disabled):active,
html.tw-prototype [role="button"]:not(:disabled):active,
html.tw-prototype .tw-btn:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  html.tw-prototype *,
  html.tw-prototype *::before,
  html.tw-prototype *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html.tw-prototype button:active,
  html.tw-prototype .tw-btn:active {
    transform: none;
  }
}

/* Overlays & sheets — transform + opacity only */
html.tw-prototype #cart-overlay,
html.tw-prototype .tw-overlay {
  transition: opacity var(--duration-ui) var(--ease-out), visibility var(--duration-ui) var(--ease-out);
}

html.tw-prototype #shopping-cart,
html.tw-prototype .tw-sheet {
  transition: transform var(--duration-sheet) var(--ease-drawer);
  box-shadow: var(--shadow-bottom-sheet);
}

@media (min-width: 769px) {
  html.tw-prototype #shopping-cart,
  html.tw-prototype .tw-sheet--side {
    box-shadow: var(--shadow-cart-panel);
  }
}

/* Brand stepper / progress */
html.tw-prototype .progress-step-circle.current,
html.tw-prototype .step-pill.active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(0, 3, 48, 0.12) !important;
}

html.tw-prototype .progress-step-circle.completed,
html.tw-prototype .step-pill.done {
  background-color: var(--tw-teal-600) !important;
  border-color: var(--tw-teal-600) !important;
  color: #fff !important;
}

html.tw-prototype .progress-step-line.completed {
  background-color: var(--tw-teal-400) !important;
}

/* Savings bar */
html.tw-prototype .savings-due-bar .savings-half {
  background-color: var(--tw-teal-400) !important;
  color: var(--primary) !important;
}

html.tw-prototype .savings-due-bar .due-half {
  background-color: var(--primary) !important;
  color: #fff !important;
}

/* CTA buttons */
html.tw-prototype .tw-cta,
html.tw-prototype .btn-add-cart {
  background-color: var(--tw-red-600) !important;
  color: #fff !important;
  border-radius: var(--tw-radius-pill);
  min-height: var(--tw-button-height);
  font-weight: 700;
}

html.tw-prototype #bottom-cart-summary-bar {
  background-color: var(--primary) !important;
}