/* WeConext — design tokens (from docs/design/assets/tokens.css; Google Fonts @import replaced by fonts.css) */

:root {
  /* Brand */
  --wcx-red: #C42633;          /* primary accent: buttons, dots, fills (white text on it = 5.7:1) */
  --wcx-red-text: #E0434F;     /* red text on dark (small sizes), wordmark "next" */
  --wcx-red-on-light: #A81E2B; /* red text on cream sections */

  /* Dark surfaces */
  --wcx-bg: #0A0E13;           /* page background */
  --wcx-surface-1: #0D1218;    /* panels, illustration frames */
  --wcx-surface-2: #10161D;    /* cards */
  --wcx-surface-3: #161E28;    /* image / cover backgrounds */
  --wcx-line: #1C2530;         /* section dividers */
  --wcx-line-strong: #263140;  /* list dividers */
  --wcx-border: #2E3A4A;       /* chips, outline buttons, inputs */

  /* Text on dark */
  --wcx-text-strong: #F4F7FA;  /* headings */
  --wcx-text: #E8EDF2;         /* body emphasis */
  --wcx-text-2: #C9D2DB;       /* eyebrows, labels */
  --wcx-text-muted: #A9B6C3;   /* body copy */
  --wcx-text-subtle: #8B98A6;  /* breadcrumbs, meta */

  /* Light sections */
  --wcx-cream: #F3F1EC;
  --wcx-cream-card: #FFFFFF;
  --wcx-cream-border: #DDD8CE;
  --wcx-ink: #0A0E13;
  --wcx-ink-muted: #3A4552;

  /* Typography */
  --wcx-font-display: 'Space Grotesk', sans-serif;
  --wcx-font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --wcx-font-mono: 'IBM Plex Mono', monospace;

  --wcx-h1-home: clamp(60px, 9vw, 136px);
  --wcx-h1-page: clamp(56px, 9vw, 148px);
  --wcx-h1-short: clamp(64px, 15vw, 240px);   /* one-word heroes: WORK, LET'S TALK */
  --wcx-h2: clamp(44px, 7vw, 112px);
  --wcx-h3: 24px;
  --wcx-lead: clamp(17px, 1.6vw, 21px);
  --wcx-body: 16px;
  --wcx-eyebrow: 13px;          /* mono, uppercase, letter-spacing .08em */

  /* Layout */
  --wcx-container: 1360px;
  --wcx-gutter: clamp(20px, 4vw, 32px);
  --wcx-section-y: clamp(72px, 9vw, 120px);
  --wcx-radius-card: 20px;
  --wcx-radius-panel: 24px;
  --wcx-radius-pill: 999px;
  --wcx-nav-breakpoint: 960px;  /* below: hamburger menu */

  /* Motion */
  --wcx-ease-out: cubic-bezier(.2, .7, .2, 1);
  --wcx-reveal-duration: 900ms;
  --wcx-reveal-stagger: 90ms;   /* per sibling index, max 6 steps */
}

/* Background patterns */
.wcx-bg-grid {
  background-color: var(--wcx-bg);
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
}
.wcx-bg-dots-light {
  background-color: var(--wcx-cream);
  background-image: radial-gradient(rgba(10,14,19,0.11) 1.2px, transparent 1.7px);
  background-size: 22px 22px;
}
.wcx-bg-dots-card {
  background-color: var(--wcx-surface-2);
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1.5px);
  background-size: 18px 18px;
}
.wcx-bg-stripes-red {
  background-color: var(--wcx-red);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 14px);
}

/* Outline display text */
/* Stroke colour is explicit: currentColor would be transparent here. Override --wcx-outline-color on dark/light sections. */
.wcx-outline { --wcx-outline-color: var(--wcx-text-strong); color: transparent; -webkit-text-stroke: 2px var(--wcx-outline-color); }

/* Scroll reveal */
@keyframes wcx-reveal { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes wcx-marquee { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}