@font-face {
  font-family: "Medeo Sans";
  src: url("/assets/fonts/MedeoSansVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Medeo Sans";
  src: url("/assets/fonts/MedeoSansVariable-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

/* The public cabinet shares its bundle with /admin; scope the visual refresh to the mini app. */
html.sora-miniapp {
  font-family: "Medeo Sans", system-ui, sans-serif !important;
  --color-accent-50: 239, 246, 255 !important;
  --color-accent-100: 219, 234, 254 !important;
  --color-accent-200: 191, 219, 254 !important;
  --color-accent-300: 96, 165, 250 !important;
  --color-accent-400: 37, 99, 235 !important;
  --color-accent-500: 29, 78, 216 !important;
  --color-accent-600: 30, 64, 175 !important;
}

html.sora-miniapp.light {
  --color-champagne-50: 255, 255, 255 !important;
  --color-champagne-100: 248, 250, 253 !important;
  --color-champagne-200: 241, 245, 251 !important;
  --color-champagne-300: 220, 229, 240 !important;
  --color-champagne-400: 174, 188, 207 !important;
  --color-champagne-500: 117, 133, 155 !important;
  --color-champagne-600: 73, 88, 110 !important;
  --color-champagne-700: 47, 62, 84 !important;
  --color-champagne-800: 31, 45, 67 !important;
  --color-champagne-900: 22, 34, 55 !important;
  --color-champagne-950: 15, 25, 43 !important;
  --color-warning-400: 155, 86, 0 !important;
  --color-success-400: 8, 119, 81 !important;
}

html.sora-miniapp.dark {
  --color-accent-300: 147, 197, 253 !important;
  --color-accent-400: 96, 165, 250 !important;
  --color-accent-500: 59, 130, 246 !important;
  --color-warning-400: 251, 191, 36 !important;
  --color-success-400: 52, 211, 153 !important;
}

html.sora-miniapp body,
html.sora-miniapp button,
html.sora-miniapp input,
html.sora-miniapp select,
html.sora-miniapp textarea {
  font-family: "Medeo Sans", system-ui, sans-serif !important;
}

html.sora-miniapp .text-\[10px\] { font-size: 11px; }
html.sora-miniapp .text-\[11px\] { font-size: 12px; }
html.sora-miniapp .text-xs { font-size: 13px; }

html.sora-miniapp.light :is(
  [class~="text-dark-50/20"],
  [class~="text-dark-50/25"],
  [class~="text-dark-50/30"],
  [class~="text-dark-50/35"]
) { color: rgba(15, 25, 43, 0.66) !important; }

html.sora-miniapp.light :is(
  [class~="text-dark-50/40"],
  [class~="text-dark-50/45"],
  [class~="text-dark-50/50"],
  [class~="text-dark-50/55"]
) { color: rgba(15, 25, 43, 0.74) !important; }

html.sora-miniapp.light :is(
  [class~="text-dark-50/60"],
  [class~="text-dark-50/70"]
) { color: rgba(15, 25, 43, 0.84) !important; }

html.sora-miniapp.dark :is(
  [class~="text-dark-50/20"],
  [class~="text-dark-50/25"],
  [class~="text-dark-50/30"],
  [class~="text-dark-50/35"]
) { color: rgba(241, 245, 249, 0.64) !important; }

html.sora-miniapp.dark :is(
  [class~="text-dark-50/40"],
  [class~="text-dark-50/45"],
  [class~="text-dark-50/50"],
  [class~="text-dark-50/55"]
) { color: rgba(241, 245, 249, 0.74) !important; }

html.sora-miniapp.dark :is(
  [class~="text-dark-50/60"],
  [class~="text-dark-50/70"]
) { color: rgba(241, 245, 249, 0.86) !important; }

html.sora-miniapp.light :is(.text-dark-500, .text-dark-400, .text-dark-600) {
  color: #52627a !important;
}

html.sora-miniapp.dark :is(.text-dark-500, .text-dark-600) {
  color: #a9b8cc !important;
}

html.sora-miniapp.light :is(.text-accent-300, .text-accent-400) {
  color: #1d4ed8 !important;
}

html.sora-miniapp.light .text-warning-400 { color: #9b5600 !important; }
html.sora-miniapp.light .text-success-400 { color: #087751 !important; }

html.sora-miniapp .sora-renew-button {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #fff !important;
  border: 1px solid #1e40af !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.24) !important;
  min-height: 46px;
}

html.sora-miniapp .sora-renew-button:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
}

html.sora-miniapp .sora-subscription-manage-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 10px;
  border: 1.5px solid #2563eb;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8 !important;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

html.sora-miniapp.light .sora-subscription-manage-link {
  color: #1d4ed8 !important;
}

html.sora-miniapp.dark .sora-subscription-manage-link {
  border-color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
  color: #bfdbfe !important;
}

html.sora-miniapp :is(.sora-renew-button, .sora-subscription-manage-link):focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}

/* Bottom navigation: the labels and icons must stay legible on the light surface. */
html.sora-miniapp nav[class~="bg-dark-900/95"] a {
  font-weight: 650;
}

html.sora-miniapp nav[class~="bg-dark-900/95"] a > span {
  font-size: clamp(10px, 2.85vw, 11px);
  font-weight: 650;
}

html.sora-miniapp.light nav[class~="bg-dark-900/95"] {
  border-color: #c6d3e5 !important;
}

html.sora-miniapp.light nav[class~="bg-dark-900/95"] a[class~="text-dark-500"] {
  color: #344761 !important;
}

html.sora-miniapp.light nav[class~="bg-dark-900/95"] a[class~="text-accent-400"] {
  color: #1746bd !important;
}

html.sora-miniapp.light nav[class~="bg-dark-900/95"] [class~="bg-accent-500/15"] {
  background-color: #dbe8ff !important;
  box-shadow: inset 0 0 0 1px #b8cefa;
}

html.sora-miniapp.dark nav[class~="bg-dark-900/95"] a[class~="text-dark-500"] {
  color: #c7d4e7 !important;
}

html.sora-miniapp.dark nav[class~="bg-dark-900/95"] a[class~="text-accent-400"] {
  color: #bfdbfe !important;
}

html.sora-miniapp.dark nav[class~="bg-dark-900/95"] [class~="bg-accent-500/15"] {
  background-color: #21416e !important;
  box-shadow: inset 0 0 0 1px #3b6097;
}