/* ============================================================
   Culacc Design System — colors & type
   Source of truth for color tokens, type scale, semantic styles.
   ============================================================ */

/* ---------- Webfonts (Google Fonts CDN) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Syne:wght@600;700;800&display=swap');

:root {
  /* ---------- Color: Surface ---------- */
  --bg:            #080c14;  /* page background, near-black navy */
  --bg-deeper:     #05080f;  /* auth pages / modals beneath surface */
  --surface:       #0f1623;  /* cards, panels */
  --surface-2:     #0c1220;  /* nested cards / modal body */
  --surface-3:     #0f1a2e;  /* featured / hovered card */

  /* ---------- Color: Border ---------- */
  --border:        #1a2538;
  --border-strong: #1e2d45;
  --border-soft:   rgba(26, 37, 56, 0.6);

  /* ---------- Color: Foreground ---------- */
  --fg:            #f1f5f9;  /* high-emphasis headings */
  --fg-1:          #e2e8f0;  /* default body text */
  --fg-2:          #94a3b8;  /* secondary / labels */
  --fg-3:          #64748b;  /* muted / placeholder */
  --fg-4:          #475569;  /* disabled / metadata */

  /* ---------- Color: Brand accents ---------- */
  --blue:          #4a9eff;  /* primary accent */
  --blue-bright:   #60a8ff;  /* hover state */
  --blue-deep:     #2563eb;  /* gradient stop / pressed */
  --blue-dim:      rgba(74, 158, 255, 0.12);
  --blue-glow:     rgba(74, 158, 255, 0.25);

  --green:         #6b8f6b;  /* "free", positive flag */
  --green-dim:     rgba(107, 143, 107, 0.10);

  /* ---------- Color: Semantic ---------- */
  --success:       #6b8f6b;
  --warning:       #d4a44a;
  --danger:        #e06c6c;
  --info:          var(--blue);

  /* ---------- Gradients ---------- */
  --grad-primary:  linear-gradient(135deg, #2563eb, #4a9eff);
  --grad-accent:   linear-gradient(135deg, #4a9eff, #6b8f6b);
  --grad-hairline: linear-gradient(90deg, transparent, rgba(74,158,255,0.5), transparent);

  /* ---------- Background motifs ---------- */
  --grid-line:     rgba(74, 158, 255, 0.025);
  --grid-size:     60px;
  --orb-blue:      rgba(37, 99, 235, 0.08);
  --orb-green:     rgba(107, 143, 107, 0.06);

  /* ---------- Type families ---------- */
  --font-display:  'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-body:     'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'Fira Code', monospace;

  /* ---------- Type scale (px) ---------- */
  --text-xs:       12px;
  --text-sm:       13px;
  --text-base:     14px;
  --text-md:       15px;
  --text-lg:       16px;
  --text-xl:       18px;
  --text-2xl:      22px;
  --text-3xl:      28px;
  --text-4xl:      38px;
  --text-5xl:      clamp(42px, 7vw, 84px);

  /* ---------- Line heights ---------- */
  --lh-tight:      1.0;
  --lh-snug:       1.2;
  --lh-normal:     1.5;
  --lh-relaxed:    1.6;

  /* ---------- Letter spacing ---------- */
  --ls-display:   -0.025em;
  --ls-heading:   -0.015em;
  --ls-body:       0;
  --ls-eyebrow:    0.12em;
  --ls-logo:       0.08em;

  /* ---------- Radius ---------- */
  --radius-xs:     6px;
  --radius-sm:     8px;
  --radius-md:     10px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-2xl:    20px;
  --radius-pill:   99px;

  /* ---------- 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:      100px;

  /* ---------- Shadow / glow ---------- */
  --shadow-card:        0 1px 2px rgba(0,0,0,0.4);
  --shadow-elev:        0 12px 32px rgba(0,0,0,0.5);
  --shadow-modal:       0 24px 64px rgba(0,0,0,0.7);
  --glow-blue-sm:       0 0 20px rgba(74,158,255,0.20);
  --glow-blue-md:       0 0 32px rgba(74,158,255,0.25);
  --glow-blue-lg:       0 8px 32px rgba(74,158,255,0.40);

  /* ---------- Motion ---------- */
  --ease-out:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:      0.15s;
  --dur-base:      0.20s;
  --dur-slow:      0.40s;
}

/* ============================================================
   Semantic typography classes — apply directly to elements.
   ============================================================ */

.h1, h1.ds {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
}

.h2, h2.ds {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--fg);
}

.h3, h3.ds {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--fg);
}

.h4, h4.ds {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--blue);
}

.lead {
  font-family: var(--font-body);
  font-size: clamp(16px, 2vw, 20px);
  line-height: var(--lh-relaxed);
  color: var(--fg-3);
}

.p, p.ds {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--fg-4);
}

.code, code.ds {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  color: var(--blue);
}

.logo-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: var(--ls-logo);
  color: var(--fg-1);
}