/* ============================================================
   kupikupi v2 — OPTION E · Token-only stylesheet
   纯 CSS 版本(不含 Tailwind @theme),用于静态 HTML 预览
   生产环境请使用同目录 globals.css(Tailwind v4 @theme 版本)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Unbounded:wght@500;700;800;900&display=swap');

:root {
  /* ─── Brand ─── */
  --color-primary:                #0BA888;
  --color-primary-soft:           #E0F7F1;
  --color-primary-surface:        #F0FBF7;
  --color-primary-fill:           #087A63;
  --color-primary-fill-hover:     #066B57;
  --color-primary-fill-active:    #055443;
  --color-primary-foreground:     #FFFFFF;

  --color-cta:                    #FF6B4A;
  --color-cta-hover:              #E54A2A;
  --color-cta-active:             #C13A1F;
  --color-cta-soft:               #FFF0EB;
  --color-cta-foreground:         #FFFFFF;

  --color-sticker-yellow:         #FFD23F;
  --color-sticker-yellow-soft:    #FFF8DA;
  --color-sticker-yellow-fg:      #5C4400;
  --color-sticker-pink:           #FF4F8B;
  --color-sticker-pink-soft:      #FFE6F0;
  --color-sticker-violet:         #6B4EFF;
  --color-sticker-violet-soft:    #EFEBFF;

  --color-secondary:              #6B4EFF;
  --color-secondary-soft:         #EFEBFF;
  --color-secondary-foreground:   #FFFFFF;
  --color-link:                   #087A63;
  --color-link-hover:             #055443;

  --color-price:                  #FF2E63;
  --color-price-strike:           #8FA29B;
  --color-discount-badge:         #FF2E63;

  --gradient-sky:
    radial-gradient(ellipse 80% 60% at 70% 30%, rgba(255, 210, 63, 0.25), transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(255, 107, 74, 0.15), transparent 60%),
    linear-gradient(180deg, #E0F7F1 0%, #B8E8DD 60%, #7DD3C0 100%);

  /* ─── Neutral ─── */
  --color-bg:                     #FFFFFF;
  --color-surface:                #F7FAF8;
  --color-surface-muted:          #ECF1ED;
  --color-surface-dim:            #ECF1ED;
  --color-border:                 #E4ECE8;
  --color-border-strong:          #C7D3CD;
  --color-text:                   #0F1F1A;
  --color-text-muted:             #5E726B;
  --color-text-disabled:          #A0B0A8;
  --color-text-inverse:           #FFFFFF;

  /* ─── Semantic ─── */
  --color-success:                #0BA888;
  --color-success-soft:           #E0F7F1;
  --color-success-foreground:     #FFFFFF;
  --color-warning:                #FFA200;
  --color-warning-soft:           #FFF3DA;
  --color-warning-foreground:     #5C4400;
  --color-danger:                 #FF2E63;
  --color-danger-soft:            #FFE0E9;
  --color-danger-foreground:      #FFFFFF;
  --color-info:                   #6B4EFF;
  --color-info-soft:              #EFEBFF;
  --color-info-foreground:        #FFFFFF;

  /* ─── State ─── */
  --color-focus-ring:             rgba(11, 168, 136, 0.45);
  --color-focus-ring-cta:         rgba(255, 107, 74, 0.45);
  --color-focus-ring-danger:      rgba(255, 46, 99, 0.40);
  --color-disabled-bg:            #F2F5F3;
  --color-disabled-border:        #E4ECE8;
  --color-disabled-text:          #A0B0A8;
  --color-skeleton-base:          #ECF1ED;
  --color-skeleton-highlight:     #F7FAF8;
  --color-overlay:                rgba(15, 31, 26, 0.55);
  --color-overlay-strong:         rgba(15, 31, 26, 0.75);

  /* ─── Font ─── */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Unbounded", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* ─── Type ─── */
  --text-h1: 28px;
  --text-h2: 22px;
  --text-h3: 18px;
  --text-h4: 16px;
  --text-display: 38px;
  --text-display-lg: 52px;
  --text-price-lg: 22px;
  --text-price-md: 17px;
  --text-price-strike: 13px;
  --text-body-lg: 16px;
  --text-body: 15px;
  --text-body-sm: 13px;
  --text-caption: 12px;
  --text-label: 13px;
  --text-button: 14px;
  --text-button-sm: 13px;
  --text-overline: 11px;

  /* ─── Radius ─── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius-full: 9999px;

  /* ─── Shadow ─── */
  --shadow-none: none;
  --shadow-soft: 0 1px 2px rgba(15, 31, 26, 0.04);
  --shadow-card: 0 1px 2px rgba(15, 31, 26, 0.04), 0 4px 12px rgba(15, 31, 26, 0.06);
  --shadow-floating: 0 12px 32px rgba(15, 31, 26, 0.08), 0 2px 8px rgba(15, 31, 26, 0.06);
  --shadow-modal: 0 8px 16px rgba(15, 31, 26, 0.10), 0 24px 56px rgba(15, 31, 26, 0.16);
  --shadow-bottom-bar: 0 -2px 4px rgba(15, 31, 26, 0.04), 0 -8px 20px rgba(15, 31, 26, 0.06);
  --shadow-cta: 0 8px 20px rgba(255, 107, 74, 0.30);
  --shadow-teal: 0 8px 24px rgba(11, 168, 136, 0.25);

  /* ─── Motion ─── */
  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --duration-slow: 320ms;
  --duration-shimmer: 1500ms;
  --duration-pulse: 2000ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ─── Spacing ─── */
  --space-container-x: 16px;
  --space-section-y: 48px;
  --space-card-padding: 16px;
  --space-card-padding-compact: 12px;
  --space-card-gap: 12px;
  --space-stack-xs: 4px;
  --space-stack-sm: 8px;
  --space-stack-md: 12px;
  --space-stack-lg: 16px;
  --space-stack-xl: 24px;
  --space-stack-2xl: 32px;
  --space-inline-xs: 4px;
  --space-inline-sm: 6px;
  --space-inline-md: 8px;
  --space-inline-lg: 12px;
  --space-form-field-gap: 16px;
  --space-form-inline-gap: 8px;
  --space-bottom-cta-padding: 16px;
  --space-bottom-cta-gap: 12px;
  --space-safe-bottom: env(safe-area-inset-bottom, 0px);
  --size-touch-min: 48px;
  --size-touch-compact: 44px;
  --size-touch-comfortable: 52px;
  --gap-grid-mobile: 12px;
  --gap-grid-tablet: 16px;
  --gap-grid-desktop: 20px;
}

@media (min-width: 768px) {
  :root {
    --text-h1: 32px; --text-h2: 26px; --text-h3: 20px; --text-h4: 17px;
    --text-display: 44px; --text-display-lg: 60px;
    --text-price-lg: 26px; --text-body-lg: 17px;
    --space-container-x: 24px; --space-section-y: 64px; --space-card-padding: 20px;
  }
}

@media (min-width: 1024px) {
  :root {
    --text-h1: 38px; --text-h2: 32px; --text-h3: 22px;
    --text-display: 52px; --text-display-lg: 72px;
    --space-container-x: 32px; --space-section-y: 80px; --space-card-padding: 24px;
  }
}

/* ─── Telegram Mini App override ─── */
:root[data-telegram="1"] {
  --text-h1: 24px; --text-h2: 20px; --text-h3: 17px; --text-h4: 15px;
  --text-display: 28px; --text-display-lg: 32px;
  --text-price-lg: 20px; --text-body-lg: 16px; --text-body: 15px;
  --space-section-y: 32px; --space-card-padding: 12px;
  --radius-2xl: 16px;

  --shadow-soft: none;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-floating: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.10);
  --shadow-cta: 0 4px 12px rgba(255, 107, 74, 0.30);

  --duration-fast: 100ms; --duration-normal: 160ms; --duration-shimmer: 0ms;

  --font-sans:    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; font-family: var(--font-display); }
h1 { font-size: var(--text-h1); font-weight: var(--font-weight-black); }
h2 { font-size: var(--text-h2); font-weight: var(--font-weight-extrabold); }
h3 { font-size: var(--text-h3); font-weight: var(--font-weight-bold); font-family: var(--font-sans); }
h4 { font-size: var(--text-h4); font-weight: var(--font-weight-bold); font-family: var(--font-sans); }
p, h1, h2, h3, h4, h5, h6, li { overflow-wrap: anywhere; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }
button { font: inherit; cursor: pointer; border: 0; }
img { max-width: 100%; display: block; }
.tabular { font-variant-numeric: tabular-nums; }