/* ═══════════════════════════════════════════════════════
   WELI DESIGN SYSTEM — CSS Custom Properties
   v2.0 · May 2026
   Canonical token file. Import this into any artifact.
   ═══════════════════════════════════════════════════════ */

/* JetBrains Mono — Google Fonts (no local file uploaded) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* Inter — local brand files */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
}

:root {

  /* ─── CORE (locked) ─── */
  --w-ink:    #0A0E1A;
  --w-paper:  #FAFAF7;
  --w-signal: #FF5A1F;

  /* ─── SIGNAL SCALE ─── */
  --w-signal-deep: #C43B0D;
  --w-signal-mid:  #FF7E4D;
  --w-signal-pale: #FFE4D6;

  /* ─── INK SCALE ─── */
  --w-ink-700:  #14202E;   /* Elevated surface */
  --w-ink-500:  #243346;   /* Dividers, separators */
  --w-ink-300:  #7A8EA8;   /* Muted labels */
  --w-ink-50:   #E6EAF0;
  --w-ink-deep: #1A0A04;   /* Button text on Signal */

  /* ─── TEXT ON DARK ─── */
  --w-text-d-primary: #FFFFFF;
  --w-text-d-body:    rgba(250, 250, 247, 0.92);
  --w-text-d-muted:   rgba(250, 250, 247, 0.70);
  --w-text-d-meta:    rgba(250, 250, 247, 0.55);
  --w-text-d-ghost:   rgba(250, 250, 247, 0.35);

  /* ─── TEXT ON LIGHT ─── */
  --w-text-l-primary: #0A0E1A;
  --w-text-l-body:    rgba(10, 14, 26, 0.92);
  --w-text-l-muted:   rgba(10, 14, 26, 0.65);
  --w-text-l-meta:    rgba(10, 14, 26, 0.55);

  /* ─── BORDERS (always 0.5px) ─── */
  --w-border-d:       rgba(250, 250, 247, 0.18);
  --w-border-d-soft:  rgba(250, 250, 247, 0.09);
  --w-border-l:       rgba(10, 14, 26, 0.18);
  --w-border-l-soft:  rgba(10, 14, 26, 0.10);
  --w-border-signal:  rgba(255, 90, 31, 0.22);

  /* Surface depth borders */
  --w-border-elevated: rgba(255, 255, 255, 0.06);
  --w-border-floating: rgba(255, 255, 255, 0.10);

  /* ─── DATA PALETTE ─── */
  --w-data-blueprint: #2E6FD4;
  --w-data-meridian:  #0D9B82;
  --w-data-amber:     #D9850D;
  --w-data-slate:     #5A7090;

  /* ─── TYPOGRAPHY ─── */
  --w-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --w-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ─── RADIUS ─── */
  --w-r-sm:   6px;
  --w-r-md:   10px;
  --w-r-lg:   16px;
  --w-r-full: 9999px;

  /* ─── MOTION ─── */
  --w-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --w-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --w-ease-sharp:  cubic-bezier(0.4, 0, 0.2, 1);
  --w-ease-linear: linear;

  --w-dur-micro: 120ms;
  --w-dur-fast:  160ms;
  --w-dur-std:   240ms;
  --w-dur-slow:  480ms;
  --w-dur-xslow: 600ms;

  /* ─── SPACING ─── */
  --w-space-1:  0.5rem;
  --w-space-2:  1rem;
  --w-space-3:  1.5rem;
  --w-space-4:  2rem;
  --w-space-6:  3rem;
  --w-space-8:  4rem;
  --w-space-12: 6rem;
  --w-space-16: 8rem;
  --w-space-24: 12rem;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--w-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── SURFACES ─── */
.w-surface-base     { background: var(--w-ink); color: var(--w-text-d-body); }
.w-surface-elevated {
  background: var(--w-ink-700);
  border: 0.5px solid var(--w-border-elevated);
  border-radius: var(--w-r-lg);
}
.w-surface-floating {
  background: #1E293B;
  border: 0.5px solid var(--w-border-floating);
  border-radius: var(--w-r-lg);
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.45), 0px 1px 4px rgba(0, 0, 0, 0.3);
}
.w-surface-paper { background: var(--w-paper); color: var(--w-text-l-primary); }

/* ─── TYPOGRAPHY ─── */
.w-display { font-family: var(--w-sans); font-size: 72px; font-weight: 600; letter-spacing: -0.04em;  line-height: 1.0;  margin: 0; }
.w-h1      { font-family: var(--w-sans); font-size: 56px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; margin: 0; }
.w-h2      { font-family: var(--w-sans); font-size: 36px; font-weight: 500; letter-spacing: -0.03em;  line-height: 1.1;  margin: 0; }
.w-h3      { font-family: var(--w-sans); font-size: 22px; font-weight: 500; letter-spacing: -0.02em;  line-height: 1.2;  margin: 0; }
.w-h4      { font-family: var(--w-sans); font-size: 18px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; margin: 0; }
.w-body    { font-family: var(--w-sans); font-size: 17px; font-weight: 400; line-height: 1.65; margin: 0; }
.w-body-sm { font-family: var(--w-sans); font-size: 14px; font-weight: 400; line-height: 1.6;  margin: 0; }

.w-eyebrow {
  font-family: var(--w-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-signal);
}
.w-eyebrow::before { content: '— '; }

.w-label {
  font-family: var(--w-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.w-meta {
  font-family: var(--w-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.w-num {
  font-family: var(--w-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--w-signal);
  letter-spacing: 0.05em;
}

/* Heading colors by surface */
.w-surface-base .w-h1,
.w-surface-base .w-h2,
.w-surface-base .w-h3,
.w-surface-base .w-h4    { color: var(--w-text-d-primary); }
.w-surface-paper .w-h1,
.w-surface-paper .w-h2,
.w-surface-paper .w-h3,
.w-surface-paper .w-h4   { color: var(--w-text-l-primary); }

/* ─── WORDMARK ─── */
.w-mark      { font-family: var(--w-sans); font-weight: 500; letter-spacing: -0.02em; }
.w-mark .dot { color: var(--w-signal); }

/* ─── BUTTONS ─── */
.w-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--w-signal);
  color: var(--w-ink-deep);
  padding: 13px 22px;
  border-radius: var(--w-r-md);
  font-family: var(--w-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform var(--w-dur-fast) var(--w-ease-spring),
              background var(--w-dur-micro) var(--w-ease-linear);
}
.w-btn-primary:hover  { background: var(--w-signal-mid); }
.w-btn-primary:active { transform: scale(0.97); }

.w-btn-secondary-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0.5px solid rgba(250, 250, 247, 0.35);
  background: transparent;
  color: var(--w-text-d-primary);
  padding: 13px 22px;
  border-radius: var(--w-r-md);
  font-family: var(--w-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--w-dur-micro) var(--w-ease-linear),
              border-color var(--w-dur-micro) var(--w-ease-linear);
}
.w-btn-secondary-dark:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(250, 250, 247, 0.5);
}

/* ─── CARDS ─── */
.w-card {
  border: 0.5px solid var(--w-border-d);
  border-radius: var(--w-r-lg);
  padding: 1.75rem;
  background: transparent;
  transition: transform var(--w-dur-std) var(--w-ease-spring),
              border-color var(--w-dur-micro) var(--w-ease-linear);
}
.w-card:hover {
  transform: translateY(-3px);
  border-color: rgba(250, 250, 247, 0.22);
}
.w-card-elevated {
  background: var(--w-ink-700);
  border: 0.5px solid var(--w-border-elevated);
  border-radius: var(--w-r-lg);
  padding: 1.75rem;
}

/* ─── BADGE ─── */
.w-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 90, 31, 0.07);
  border: 0.5px solid var(--w-border-signal);
  border-radius: var(--w-r-sm);
  padding: 4px 10px;
  font-family: var(--w-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--w-signal);
}
.w-badge::before {
  content: '';
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--w-signal);
}

/* ─── DIVIDERS ─── */
.w-div-dark  { height: 0.5px; background: var(--w-border-d-soft); border: 0; }
.w-div-light { height: 0.5px; background: var(--w-border-l-soft); border: 0; }

/* ─── HERO FOCAL RADIAL (single permitted glow) ─── */
.w-hero-radial {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 50% 65%,
    rgba(255, 90, 31, 0.06) 0%,
    transparent 70%);
  z-index: 0;
}

/* ─── HERO DOT GRID ─── */
.w-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.30;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='1' cy='1' r='0.75' fill='rgba(250,250,247,0.22)'/></svg>");
  background-size: 32px 32px;
}

/* ─── REVEAL ANIMATION ─── */
.w-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--w-dur-slow) var(--w-ease-smooth),
              transform var(--w-dur-slow) var(--w-ease-smooth);
}
.w-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── META STRIP ─── */
.w-meta-strip {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.w-meta-label {
  font-family: var(--w-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-text-d-meta);
}
.w-meta-value {
  font-family: var(--w-mono);
  font-size: 12px;
  color: var(--w-text-d-primary);
  margin-top: 4px;
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}