/* ============================================================
   Treat design tokens  (treat.fyi)
   Extracted from the current site at https://www.bidyourapp.com/ (Tailwind v4 build)
   Light theme only — the site declares color-scheme: light.
   ============================================================ */

/* Sunghyun Sans — display face (hero headline, display numbers). Files in ./fonts/ */
@font-face { font-family: "Sunghyun Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/SunghyunSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Sunghyun Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/SunghyunSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "Sunghyun Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/SunghyunSans-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Sunghyun Sans"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/SunghyunSans-Black.woff2") format("woff2"); }

:root {
  /* ---------- Type ---------- */
  --font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Display: Sunghyun Sans 600–900 (hero h1 + display numbers on the site). Body/UI: Inter. */
  --font-display: "Sunghyun Sans", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 0.75rem;     /* 12 */
  --text-13: 13px;        /* dominant UI size on the site */
  --text-sm: 0.875rem;    /* 14 */
  --text-15: 15px;
  --text-base: 1rem;      /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.25rem;     /* 20 */
  --text-2xl: 1.5rem;     /* 24 */
  --text-3xl: 1.875rem;   /* 30 */
  --text-display: 44px;   /* hero headline — 72px at sm, 98px at lg, line-height .98 */
  --text-6xl: 3.75rem;    /* 60 */
  --text-num: 44px;       /* display-num: bid input 44px → 68.59px sm; listing prices 20px → 33.59px sm */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-ui: -0.26px;      /* 13px labels */
  --tracking-body: -0.4px;     /* 16–18px text */
  --tracking-heading: -0.7px;  /* 20px+ headings */
  --tracking-display: -0.06em; /* display numbers */

  /* ---------- Color: ground & surfaces ---------- */
  --color-page: #e6e6e6;
  --color-surface: #ffffff;
  --color-surface-2: #e8e8e8;
  --color-input: #d7d7d7;
  --color-glass: rgba(255, 255, 255, 0.70);
  --color-dark: #0e0e10;

  /* ---------- Color: text ---------- */
  --color-fg: #1a2e3f;
  --color-fg-strong: #14334d;
  --color-muted: rgba(49, 53, 61, 0.70);   /* #31353d @ 70% */
  --color-on-accent: #ffffff;

  /* ---------- Color: borders ---------- */
  --color-border-base: #9eabb5;
  --color-border: rgba(158, 171, 181, 0.45);   /* #9eabb573 */
  --color-border-soft: rgba(158, 171, 181, 0.31);
  --color-hairline: rgba(0, 0, 0, 0.05);

  /* ---------- Color: accent (blue) ---------- */
  --color-accent: #0091fc;
  --color-accent-hi: #39abff;
  --color-accent-lo: #0094ff;
  --color-accent-glow: #0697ff;
  --color-accent-soft: rgba(46, 166, 255, 0.22);  /* #2ea6ff38 */
  --gradient-accent: linear-gradient(#39abff 0%, #0094ff 100%);

  /* ---------- Color: fire (orange CTA) ---------- */
  --color-fire: #ff8f39;
  --color-fire-deep: #df5c0f;
  --color-fire-text: #ff8a63;
  --color-fire-soft: rgba(255, 143, 57, 0.16);    /* #ff8f3929 */
  --gradient-fire: linear-gradient(117deg, #ff8f39 3%, #df5c0f 116%);

  /* ---------- Color: semantic ---------- */
  --color-green: #009708;
  --color-green-soft: rgba(0, 151, 8, 0.14);
  --color-live: #0b7100;
  --color-pill-green: #24b271;
  --color-pill-green-inset: #02a55a;
  --color-emerald-300: #5ee9b5;
  --color-emerald-400: #00d294;
  --color-clicks: #1c10ff;
  --color-clicks-soft: rgba(28, 16, 255, 0.08);
  --color-red: #e40014;
  --color-red-soft: rgba(242, 84, 45, 0.15);

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-5xl: 64rem;

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-card: 24px;
  --radius-pill: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-color: #b7b5cb;   /* lavender-grey, not neutral black */
  --shadow-card:
    0 52.3px 7.4px rgba(183, 181, 203, 0.01),
    0 33.1px 6.5px rgba(183, 181, 203, 0.05),
    0 18.3px 5.7px rgba(183, 181, 203, 0.16),
    0 8.7px 4.4px rgba(183, 181, 203, 0.27),
    0 1.7px 2.2px rgba(183, 181, 203, 0.31);
  --shadow-pill:
    0 50.2px 14.2px rgba(183, 181, 203, 0.01),
    0 31.8px 12.6px rgba(183, 181, 203, 0.05),
    0 17.6px 10.9px rgba(183, 181, 203, 0.16),
    0 8.4px 8.4px rgba(183, 181, 203, 0.27),
    0 1.7px 4.2px rgba(183, 181, 203, 0.31);
  --shadow-btn-primary: inset 0 4px 3px rgba(255, 255, 255, 0.40), inset 0 4px 4px #0697ff;
  --shadow-btn-fire: inset 0 2px 4px rgba(255, 255, 255, 0.55), 0 4px 2px rgba(231, 104, 25, 0.27);
  --shadow-pill-green: inset 0 4px 4px #02a55a;
  --shadow-highlight: 0 1px 0 rgba(255, 255, 255, 0.5);

  /* ---------- Focus rings ---------- */
  --ring-width: 4px;
  --ring-accent: rgba(0, 145, 252, 0.25);
  --ring-accent-input: rgba(0, 145, 252, 0.15);
  --ring-fire: rgba(255, 143, 57, 0.30);

  /* ---------- Motion ---------- */
  --duration: 150ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --blur-sm: 8px;
  --blur-md: 12px;
}

/* ============================================================
   Base
   ============================================================ */
body {
  background: var(--color-page);
  color: var(--color-fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: var(--leading-normal);
}

/* ============================================================
   Components (mirrors the site's class names)
   ============================================================ */
.btn-primary,
.btn-fire,
.btn-fire-soft,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3-5);
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-body);
  cursor: pointer;
  transition: filter var(--duration) var(--ease), transform var(--duration) var(--ease),
              background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.btn-primary { color: #fff; background-image: var(--gradient-accent); box-shadow: var(--shadow-btn-primary); }
.btn-fire    { color: #fff; background-image: var(--gradient-fire);   box-shadow: var(--shadow-btn-fire); }
.btn-fire-soft { color: var(--color-fire-deep); background: var(--color-fire-soft); }
.btn-fire-soft:hover { color: #fff; background: var(--color-fire); }
.btn-ghost { color: var(--color-fg); background: var(--color-glass); box-shadow: var(--shadow-pill); }
.btn-primary:hover, .btn-fire:hover { filter: brightness(1.05); }
.btn-primary:active, .btn-fire:active { transform: translateY(1px); }

.btn-primary:focus-visible, .btn-ghost:focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--ring-accent); }
.btn-fire:focus-visible, .btn-fire-soft:focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--ring-fire); }

.input {
  width: 100%;
  padding: var(--space-2-5) var(--space-4);
  color: var(--color-fg);
  background: var(--color-input);
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  outline: none;
}
.input:focus { box-shadow: 0 0 0 var(--ring-width) var(--ring-accent-input); }

.card { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.card-sm { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.glass-pill { background: var(--color-glass); border-radius: var(--radius-pill); box-shadow: var(--shadow-pill); }

.chip-clicks, .chip-live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--text-15);
  line-height: 1.27;
  font-weight: var(--weight-medium);
  letter-spacing: -0.3px;
  white-space: nowrap;
  border-radius: var(--radius-pill);
}
.chip-clicks { color: var(--color-clicks); background: var(--color-clicks-soft); }
.chip-live   { color: var(--color-live);   background: var(--color-green-soft); }

.divider-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: var(--weight-medium);
  letter-spacing: -0.6px;
  white-space: nowrap;
  color: #fff;
  background: var(--color-pill-green);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pill-green);
}

.font-display { font-family: var(--font-display); }

.hero-title {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-display);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  color: var(--color-fg);
}
@media (min-width: 640px)  { .hero-title { font-size: 72px; } }
@media (min-width: 1024px) { .hero-title { font-size: 98px; } }

.display-num {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.text-muted { color: var(--color-muted); }
.text-fg-strong { color: var(--color-fg-strong); }
.text-accent { color: var(--color-accent); }
.text-fire { color: var(--color-fire); }
.text-fire-deep { color: var(--color-fire-deep); }
.text-green { color: var(--color-green); }