/*
 * AI ProductBase Design System
 * Version: 1.0.0
 * Website: https://productbase.xyz
 * CSS foundation: Bootstrap 5.3; UI language: understated shadcn-inspired.
 * Keep this file framework-agnostic so the same tokens can be reused in Laravel Blade.
 */
:root {
  --pb-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pb-font-body: 16px;
  --pb-font-support: 15px;
  --pb-font-support-compact: 14px;
  --pb-font-card-title: 16px;
  --pb-font-section-title: 23px;
  --pb-font-hero-title: 34px;
  --pb-font-site-title: 22px;
  --pb-line-height-body: 1.55;
  --pb-color-text: #111216;
  --pb-color-muted: #717780;
  --pb-color-border: #e7e8eb;
  --pb-color-surface: #f8f9fa;
  --pb-radius-control: 7px;
  --pb-radius-card: 10px;
}
/* Reusable semantic typography classes for all future screens */
.pb-type-body { font-size: var(--pb-font-body); line-height: var(--pb-line-height-body); }
.pb-type-support { font-size: var(--pb-font-support); line-height: var(--pb-line-height-body); }
.pb-type-support-compact { font-size: var(--pb-font-support-compact); line-height: var(--pb-line-height-body); }
.pb-type-card-title { font-size: var(--pb-font-card-title); font-weight: 700; line-height: 1.35; }
.pb-type-section-title { font-size: var(--pb-font-section-title); font-weight: 720; line-height: 1.3; }
.pb-type-site-title { font-size: var(--pb-font-site-title); font-weight: 750; letter-spacing: -.8px; }
.pb-type-hero-title { font-size: var(--pb-font-hero-title); font-weight: 760; line-height: 1.2; }
/* Shared preview component mappings; future Blade components should reuse these tokens */
body { font-family: var(--pb-font-family); font-size: var(--pb-font-body); line-height: var(--pb-line-height-body); color: var(--pb-color-text); }
.brand { font-size: var(--pb-font-site-title); }
.top-link, .login-btn { font-size: var(--pb-font-support-compact); }
.category-link, .sidebar-bottom { font-size: var(--pb-font-support); }
.hero h1 { font-size: var(--pb-font-hero-title); }
.hero p, .search-wrap input, .pill-tabs button { font-size: var(--pb-font-support); }
.section-heading { font-size: var(--pb-font-section-title); }
.product-name, .footer-cols h3 { font-size: var(--pb-font-card-title); }
.product-info, .tag, .vote, .mini-count, .preview-strip, .copyright, .footer-cols a, .ad-placeholder { font-size: var(--pb-font-support-compact); }
@media (max-width: 850px) { .hero h1 { font-size: 29px; } .brand { font-size: 20px; } }
@media (max-width: 560px) { .hero h1 { font-size: 26px; } .brand { font-size: 19px; } .login-btn { font-size: var(--pb-font-support-compact); } }