@import "tailwindcss";

@font-face {
  font-family: znicons;
  src: url("@/assets/fonts/znicons.ttf") format("truetype");
  font-display: swap;
}

@theme {
  --color-brand-50: #eef8ff;
  --color-brand-100: #d9eeff;
  --color-brand-500: #2d91ff;
  --color-brand-700: #145ee1;
  --color-brand-800: #174bb6;
  --color-ink-900: #181b25;
  --color-ink-800: #222530;
  --color-ink-700: #2b303b;
  --color-ink-600: #525866;
  --color-ink-500: #717784;
  --color-ink-400: #99a0ae;
  --color-ink-300: #cacfd8;
  --color-ink-200: #e5e8ee;
  --color-ink-100: #f2f5f8;
  --color-ink-50: #f9fafb;
  --color-app-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-surface-muted: #f2f5f8;
  --radius-card: 8px;
  --radius-control: 6px;
  --spacing-page-x: 1rem;
  --spacing-page-y: 1rem;
  --font-sans: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

:root {
  color: var(--color-ink-900);
  background: var(--color-app-bg);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --app-max-width: 480px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --ui-page-x: var(--spacing-page-x);
  --ui-page-y: var(--spacing-page-y);
  --ui-bottom-bar-height: calc(72px + var(--safe-area-bottom));
  --theme-color-800: var(--color-brand-800);
  --theme-color-700: var(--color-brand-700);
  --theme-color-500: var(--color-brand-500);
  --theme-color-100: var(--color-brand-100);
  --theme-color-50: var(--color-brand-50);
  --van-primary-color: var(--color-brand-500);
  --van-success-color: #16a34a;
  --van-danger-color: #dc2626;
  --van-warning-color: #f59e0b;
  --van-text-color: var(--color-ink-900);
  --van-text-color-2: var(--color-ink-600);
  --van-text-color-3: var(--color-ink-400);
  --van-border-color: var(--color-ink-100);
  --van-background: var(--color-app-bg);
  --van-background-2: var(--color-surface);
  --van-radius-md: var(--radius-control);
  --van-radius-lg: var(--radius-card);
  --uni-color-primary: #007aff;
  --uni-color-success: #4cd964;
  --uni-color-warning: #f0ad4e;
  --uni-color-error: #dd524d;
  --uni-text-color: #333333;
  --uni-text-color-grey: #999999;
  --uni-border-color: #c8c7cc;
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  min-height: 100%;
  margin: 0;
}

body {
  min-width: 320px;
  overflow: hidden;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

.app-divport {
  min-height: 100dvh;
  background:
    linear-gradient(
      180deg,
      rgba(238, 248, 255, 0.95) 0%,
      rgba(245, 247, 250, 0) 280px
    ),
    var(--color-app-bg);
}

@utility mobile-shell {
  display: flex;
  min-height: 100dvh;
  width: 100%;
  max-width: var(--app-max-width);
  margin-inline: auto;
  flex-direction: column;
  background: var(--color-app-bg);
}

@utility mobile-shell-surface {
  display: flex;
  min-height: 100dvh;
  width: 100%;
  max-width: var(--app-max-width);
  margin-inline: auto;
  flex-direction: column;
  background: var(--color-surface);
}

@utility mobile-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-ink-100);
  background: color-mix(in srgb, var(--color-surface) 95%, transparent);
  padding: calc(var(--safe-area-top) + 0.75rem) var(--ui-page-x) 0.75rem;
}

@utility mobile-scroll {
  min-height: 0;
  flex: 1 1 0%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@utility mobile-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: var(--app-max-width);
  transform: translateX(-50%);
  border-top: 1px solid var(--color-ink-100);
  background: var(--color-surface);
  padding: 0.75rem var(--ui-page-x) calc(var(--safe-area-bottom) + 0.75rem);
}

@utility pb-bottom-bar {
  padding-bottom: calc(var(--ui-bottom-bar-height) + 1rem);
}

@utility ui-card {
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: 1rem;
}

@utility ui-input {
  width: 100%;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-ink-100);
  background: var(--color-surface);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-ink-900);
}

@utility ui-button-primary {
  border-radius: var(--radius-card);
  background: var(--color-brand-500);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
}

@utility ui-button-secondary {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-ink-100);
  background: var(--color-surface);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink-700);
}

@utility mobile-drawer-surface {
  width: 100%;
  max-width: var(--app-max-width);
  border-radius: 1rem 1rem 0 0;
  background: var(--color-surface);
  padding: 1rem var(--ui-page-x) calc(var(--safe-area-bottom) + 1rem);
}

@utility mobile-modal-surface {
  width: min(calc(100vw - 2rem), 420px);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: 1rem;
}
