/* Hoshi Cafe On Air — shared design tokens & base styles */

:root {
  /* Accent palette (converged from bright #ff0011) */
  --y2k-red-1: #e1000f;
  --y2k-red-2: #d40012;
  --y2k-red-3: #a3000b;
  --y2k-red-glow: #ff0011;
  --y2k-silver-1: #f5f5fb;
  --y2k-silver-2: #d9d9e6;
  --y2k-silver-3: #a9a9bc;

  /* Semantic colors */
  --color-bg: #f3f3f7;
  --color-fg: #2f2f39;
  --color-fg-soft: rgba(63, 63, 76, 0.74);

  /* Glass surfaces */
  --glass-bg: rgba(255, 255, 255, 0.64);
  --glass-border: rgba(255, 255, 255, 0.86);
  --glass-border-red: rgba(225, 0, 15, 0.4);
  --shadow-glass: 0 10px 28px rgba(108, 108, 124, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --glow-red: 0 0 16px rgba(255, 0, 17, 0.32), 0 0 30px rgba(255, 0, 17, 0.18);

  /* Layout */
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Motion */
  --transition-base: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fade: 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-interactive: 0.22s ease;

  /* Z-index scale */
  --z-base: 0;
  --z-overlay: 10;
  --z-modal: 40;
  --z-loading: 50;

  /* Focus ring */
  --focus-ring: 2px solid rgba(225, 0, 15, 0.85);
  --focus-ring-offset: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  background: var(--color-bg);
  color: var(--color-fg);
  position: relative;
  isolation: isolate;
}

/* Aurora background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 18% 16%, rgba(225, 0, 15, 0.18) 0%, transparent 42%),
    radial-gradient(ellipse at 82% 14%, rgba(255, 255, 255, 0.9) 0%, transparent 48%),
    radial-gradient(ellipse at 50% 84%, rgba(255, 230, 234, 0.3) 0%, transparent 54%),
    radial-gradient(ellipse at 78% 70%, rgba(232, 236, 245, 0.58) 0%, transparent 48%),
    linear-gradient(160deg, #f7f7fa 0%, #efeff4 54%, #e7e7ee 100%);
  animation: aurora 18s ease-in-out infinite alternate;
}

@keyframes aurora {
  0% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(8deg) brightness(1.05); }
  100% { filter: hue-rotate(-6deg) brightness(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* Shared interactive button base — extend in page CSS */
:is(button, a.btn, .cta-btn, .back-btn, .checkout-btn, .print-receipt-btn, .apple-gate-btn, .drink-item, .yt-modal__close):focus {
  outline: none;
}

:is(button, a.btn, .cta-btn, .back-btn, .checkout-btn, .print-receipt-btn, .apple-gate-btn, .drink-item, .yt-modal__close):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

:is(button, a.btn, .cta-btn, .back-btn, .checkout-btn, .print-receipt-btn, .yt-modal__close):active:not(:disabled) {
  transform: scale(0.98);
}

.drink-item:active:not(:disabled) {
  transform: scale(0.99);
}

/* Receipt skeleton shimmer */
.skeleton-text {
  display: inline-block;
  min-width: 8em;
  min-height: 1.1em;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(108, 108, 124, 0.12) 0%, rgba(108, 108, 124, 0.22) 50%, rgba(108, 108, 124, 0.12) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  color: transparent;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-text { animation: none; background: rgba(108, 108, 124, 0.15); }
}

/* Glass surface — blur on ::before avoids Chrome 3D flip compositing bugs */
.glass-surface {
  position: relative;
  background: transparent;
  isolation: isolate;
}

.glass-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur, 20px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px));
  pointer-events: none;
}

.glass-surface > * {
  position: relative;
  z-index: 1;
}

.glass-surface--blur-sm {
  --glass-blur: 12px;
}

/* 3D card flip — shared by cafe-menu & sticker */
.card-flipper {
  width: 100%;
  height: var(--card-height);
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  transform: translateZ(0);
}

.card-flipper.is-flipped {
  transform: rotateY(180deg);
}

.card-flipper.is-flipped.is-settled {
  transform: none;
  transition: none;
}

.card-face {
  position: absolute;
  inset: 0;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: flat;
  -webkit-transform-style: flat;
  transform: rotateY(0deg);
}

.card-face--back {
  transform: rotateY(180deg);
  overflow: hidden;
}

.card-flipper.is-settled .card-face--front {
  visibility: hidden;
  pointer-events: none;
}

.card-flipper.is-settled .card-face--back {
  transform: none;
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .card-flipper {
    transition: none;
  }
}