/* =========================================================================
   Trendini — Colors & Type
   Single source of truth for CSS variables (base tokens + semantic tokens)
   and webfont loading.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&family=Outfit:wght@300;400&family=JetBrains+Mono:wght@500&display=swap');

:root {
  /* ---------- Base colors ---------- */
  --bg-1: #0A0E14;          /* primary canvas — dark navy */
  --bg-2: #000000;           /* pure black — contrast blocks */
  --fg-1: #FFFFFF;           /* primary text */
  --fg-2: #7B879E;           /* secondary / muted text */
  --accent: #3A6BFF;         /* the blue — used sparingly */

  /* Hairlines / dividers — derived */
  --line-1: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-accent: rgba(58, 107, 255, 0.40);

  /* ---------- Type families ---------- */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Outfit', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---------- Type scale (display / editorial) ---------- */
  --fs-display-xl: clamp(72px, 12vw, 200px);
  --fs-display-l:  clamp(56px, 8vw, 128px);
  --fs-display-m:  clamp(40px, 5vw, 80px);
  --fs-display-s:  clamp(32px, 4vw, 56px);

  /* ---------- Type scale (body) ---------- */
  --fs-lead:  22px;
  --fs-body:  17px;
  --fs-small: 14px;

  /* ---------- Type scale (labels / mono) ---------- */
  --fs-label:       12px;
  --fs-label-small: 11px;

  /* ---------- Letter spacing ---------- */
  --ls-display-tight:  -0.04em;
  --ls-display:        -0.025em;
  --ls-body:           0;
  --ls-label:          0.22em;
  --ls-label-wide:     0.3em;

  /* ---------- Line height ---------- */
  --lh-display: 1.02;
  --lh-heading: 1.08;
  --lh-body:    1.55;
  --lh-label:   1.4;

  /* ---------- Spacing (8px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;
  --s-10: 192px;

  /* ---------- Radii ---------- */
  --r-0: 0;
  --r-1: 2px;       /* default — cards, inputs */
  --r-pill: 999px;  /* buttons, tags */

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
}

/* =========================================================================
   Semantic / element-level styles
   Apply these by class OR by auto-styling native tags where safe.
   ========================================================================= */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Plus Jakarta Sans 800, tight */
.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display-xl);
  letter-spacing: var(--ls-display-tight);
  line-height: var(--lh-display);
}

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display-l);
  letter-spacing: var(--ls-display-tight);
  line-height: var(--lh-display);
}

.h2, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display-m);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
}

.h3, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display-s);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
}

/* Body */
.lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--fg-1);
}

.p, p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.muted { color: var(--fg-2); }
.fg   { color: var(--fg-1); }
.accent { color: var(--accent); }

/* Labels — JetBrains Mono, uppercase, wide-tracked */
.label, .tag {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: var(--lh-label);
  color: var(--fg-2);
}

.label--fg { color: var(--fg-1); }
.label--accent { color: var(--accent); }

/* Mono inline code */
code, .code {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.92em;
  color: var(--fg-1);
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: var(--r-1);
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Dividers */
.hr, hr {
  border: 0;
  height: 1px;
  background: var(--line-1);
  margin: var(--s-6) 0;
}

/* Selection */
::selection {
  background: var(--accent);
  color: var(--fg-1);
}