/* ============================================
   BIGDOT DESIGN SYSTEM — theme-control.css
   ============================================ */

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');

:root {
  /* ── Fonts ── */
  --site-primary-font: "Plus Jakarta Sans", sans-serif;
  --site-secondary-font: "Cormorant Garamond", Georgia, serif;
  --site-tertiary-font: "Bricolage Grotesque", sans-serif;

  /* Semantic font roles — use these in prompts */
  --site-heading-font: var(--site-secondary-font);
  --site-body-font: var(--site-primary-font);
  --site-display-font: var(--site-tertiary-font);

  /* ── Colors ── */
  --site-primary-color: #15285d;
  --site-secondary-color: #f2f4ff;
  --site-tertiary-color: #2255e8;
  --site-quaternary-color: #e0dad0;
  --site-text-color: #1c1a16;
  --site-text-muted-color: #808080;
  --site-cta-color: #f05c29;

  /* State colors */
  --site-success-color: #16a34a;
  --site-error-color: #dc2626;
  --site-warning-color: #d97706;
  --site-info-color: var(--site-tertiary-color);

  /* Surface & border */
  --site-border-color: #e0dad0;
  --site-input-bg: #ffffff;
  --site-input-border: #d1cfc9;
  --site-overlay-bg: rgba(28, 26, 22, 0.5);
  --glass-white: rgba(255, 255, 255, 0.95);

  /* ── Spacing ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Border Radius ── */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0px 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
  --shadow-card: 0px 4px 20px rgba(0, 0, 0, 0.05);

  /* ── Transitions ── */
  --transition: all 0.2s ease;
  --transition-fast: all 0.15s ease;

  /* Tailwind shadow resets */
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-size: clamp(10px, 0.9vw, 14px);
  line-height: 1.6;
  font-family: var(--site-body-font);
  color: var(--site-text-color);
}

/* ============================================
   COLOR UTILITIES
   ============================================ */
.primaryColor      { color: var(--site-primary-color) !important; }
.primaryColor a    { color: var(--site-primary-color) !important; }
.primaryBgColor    { background-color: var(--site-primary-color) !important; }

.secondaryColor    { color: var(--site-secondary-color) !important; }
.secondaryColor a  { color: var(--site-secondary-color) !important; }
.secondaryBgColor  { background-color: var(--site-secondary-color) !important; }

.tertiaryColor     { color: var(--site-tertiary-color) !important; }
.tertiaryBgColor   { background-color: var(--site-tertiary-color) !important; }

.headingColor      { color: var(--site-text-color) !important; }
.headingColor a    { color: var(--site-text-color) !important; }

.linkColor         { color: var(--site-primary-color) !important; }
.linkColor a       { color: var(--site-primary-color) !important; }
.linkColor a:hover { color: var(--site-cta-color) !important; }

.iconColor         { color: var(--site-primary-color) !important; }
.borderColor       { border-color: var(--site-border-color) !important; }
.paragraphColor    { color: var(--site-text-muted-color) !important; }

.ctaColor          { color: var(--site-cta-color) !important; }
.ctaBgColor        { background-color: var(--site-cta-color) !important; }
.offerBg           { background-color: var(--site-cta-color) !important; }
.secondaryBtnBgColor { background-color: var(--site-cta-color) !important; }

/* State colors */
.successColor   { color: var(--site-success-color) !important; }
.errorColor     { color: var(--site-error-color) !important; }
.warningColor   { color: var(--site-warning-color) !important; }

/* ============================================
   TYPOGRAPHY — FONT FAMILIES
   ============================================ */
.fontPrimary   { font-family: var(--site-primary-font) !important; }
.fontSecondary { font-family: var(--site-secondary-font) !important; }
.fontTertiary  { font-family: var(--site-tertiary-font) !important; }

/* ── Font Weights (fixed) ── */
.font100 { font-weight: 100 !important; }
.font200 { font-weight: 200 !important; }
.font300 { font-weight: 300 !important; }
.font400 { font-weight: 400 !important; }
.font500 { font-weight: 500 !important; }
.font600 { font-weight: 600 !important; }
.font700 { font-weight: 700 !important; }
.font800 { font-weight: 800 !important; }
.font900 { font-weight: 900 !important; }

/* ── Font Sizes ── */
.font9  { font-size: clamp(8px, 0.6vw, 9px);   line-height: 1.4; }
.font10 { font-size: clamp(9px, 0.7vw, 10px);  line-height: 1.5; }
.font11 { font-size: clamp(9px, 0.75vw, 11px); line-height: 1.45; }
.font12 { font-size: clamp(10px, 0.85vw, 12px);line-height: 1.5; }
.font13 { font-size: clamp(11px, 0.9vw, 13px); line-height: 1.54; }
.font14 { font-size: clamp(10px, 0.9vw, 14px); line-height: 1.5; }
.font16 { font-size: clamp(13px, 1.1vw, 16px); line-height: 1.5; }
.font18 { font-size: clamp(14px, 1.3vw, 18px); line-height: 1.5; }
.font20 { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.4; }
.font22 { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; }
.font24 { font-size: clamp(20px, 2vw, 24px);   line-height: 1.5; }
.font26 { font-size: clamp(21px, 2.1vw, 26px); line-height: 1.5; }
.font28 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; }
.font30 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.33; }
.font32 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.35; }
.font36 { font-size: clamp(30px, 3vw, 36px);   line-height: 1.35; }
.font40 { font-size: clamp(32px, 3.2vw, 40px); line-height: 1.45; }
.font48 { font-size: clamp(38px, 3.8vw, 48px); line-height: 1.2; }
.font60 { font-size: clamp(48px, 4vw, 60px);   line-height: 1.15; }

/* ── Line Height ── */
.lh1   { line-height: 1 !important; }
.lh12  { line-height: 1.2 !important; }
.lh14  { line-height: 1.4 !important; }
.lh16  { line-height: 1.6 !important; }
.lhNormal { line-height: normal !important; }

/* ============================================
   BORDER RADIUS (fixed — all unique)
   ============================================ */
.br0    { border-radius: var(--radius-none) !important; }
.br4    { border-radius: var(--radius-sm)   !important; }
.br8    { border-radius: var(--radius-md)   !important; }
.br12   { border-radius: var(--radius-lg)   !important; }
.br16   { border-radius: var(--radius-xl)   !important; }
.br24   { border-radius: var(--radius-2xl)  !important; }
.brFull { border-radius: var(--radius-full) !important; }

/* Keep old names for backward compatibility */
.br5  { border-radius: var(--radius-sm) !important; }
.br10 { border-radius: var(--radius-md) !important; }
.br50 { border-radius: var(--radius-full) !important; }

/* ============================================
   SHADOWS & CARDS
   ============================================ */
.shadowSm   { box-shadow: var(--shadow-sm) !important; }
.shadowMd   { box-shadow: var(--shadow-md) !important; }
.shadowLg   { box-shadow: var(--shadow-lg) !important; }
.shadowNone { box-shadow: none !important; }

.cardBoxShadow {
  box-shadow: var(--shadow-card);
  border: 1px solid var(--site-border-color) !important;
}