/* ==========================================================================
   WYRA LABS — DESIGN TOKENS
   Locked brand system: muted-teal ("Option 3") + Space Grotesk / Inter / Mono
   Import this first; everything else builds on it.
   ========================================================================== */

/* Fonts (all free, Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Bricolage+Grotesque:opsz,wght@12..96,600&display=swap');

:root {
  /* ---------- CORE PALETTE ---------- */
  --ink:          #12333A;  /* headings, dark text, buttons, dark sections, logo curve */
  --teal:         #265A63;  /* panels, secondary dark surfaces */
  --accent-deep:  #2C7E8B;  /* ACCENT ON LIGHT — eyebrows, links, highlight words */
  --accent:       #3AA5B5;  /* ACCENT ON DARK — logo node, dots, active states */
  --gold:         #E4C34A;  /* ONE sharp pop per view. Never body text. */
  --green:        #5AA987;  /* support / success */

  /* ---------- SURFACES ---------- */
  --bg:           #F2F6F6;  /* page background */
  --bg-2:         #E7EFEF;  /* alternating sections */
  --card:         #FFFFFF;  /* cards */

  /* ---------- TEXT ---------- */
  --txt:          #1B3238;  /* body text on light */
  --sub:          #5C7278;  /* muted body (AA: 4.67) */
  --sub-mute:     #93AEB2;  /* ⚠ DECORATIVE ONLY — fails text contrast (2.16:1) */
  --on-dark:      #EAF4F5;  /* text on dark surfaces */
  --on-dark-sub:  #9FBDC1;  /* muted text on dark (AA: 6.74) */
  --on-dark-accent:#7FB8C0; /* muted accent on dark */

  /* ---------- LINES ---------- */
  --line:         rgba(18, 51, 58, 0.12);
  --line-2:       rgba(18, 51, 58, 0.22);
  --line-dark:    rgba(255, 255, 255, 0.12);

  /* ---------- TINTS / SHADES (ramps for hover, borders, fills) ---------- */
  --accent-50:    #EAF5F7;
  --accent-100:   #D3EAEE;
  --accent-200:   #A8D5DD;
  --accent-300:   #7CC0CC;
  --accent-400:   #3AA5B5;  /* = --accent */
  --accent-500:   #2C7E8B;  /* = --accent-deep */
  --accent-600:   #256A75;
  --accent-700:   #1E555E;
  --accent-800:   #174148;
  --accent-900:   #12333A;  /* = --ink */

  /* ---------- ELEVATION ---------- */
  --shadow-sm:    0 1px 2px rgba(18, 51, 58, 0.04);
  --shadow-md:    0 1px 2px rgba(18, 51, 58, 0.04), 0 8px 24px -16px rgba(18, 51, 58, 0.12);
  --shadow-lg:    0 24px 50px -24px rgba(18, 51, 58, 0.30);
  --shadow-float: 0 40px 80px -40px rgba(18, 51, 58, 0.28); /* product-UI slot */

  /* ---------- RADIUS ---------- */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-pill: 100px;

  /* ---------- GRADIENTS (atmospheric hero glow) ---------- */
  --glow-accent: radial-gradient(circle at center, rgba(58,165,181,0.13) 0%, transparent 62%);
  --glow-green:  radial-gradient(circle at center, rgba(90,169,135,0.05) 0%, transparent 60%);
  --glow-gold:   radial-gradient(circle at center, rgba(228,195,74,0.10) 0%, transparent 60%);

  /* ---------- TYPE ---------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-brand:   'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif; /* wordmark only: brand v1.5 */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* type scale — desktop */
  --t-display: 80px;   --t-display-ls: -0.04em;
  --t-h1:      52px;   --t-h1-ls:      -0.035em;
  --t-h2:      30px;   --t-h2-ls:      -0.025em;
  --t-h3:      20px;   --t-h3-ls:      -0.01em;
  --t-lede:    20px;
  --t-body:    16px;
  --t-small:   13px;
  --t-eyebrow: 12px;   --t-eyebrow-ls: 0.12em;

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

  /* section rhythm — generous (Dify scroll discipline) */
  --section-y:   96px;   /* mobile */
  --section-y-d: 140px;  /* desktop */
  --maxw:       1200px;
  --gutter:      24px;

  /* ---------- MOTION ---------- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  160ms;
  --dur:       260ms;
  --dur-slow:  600ms;
}

/* ==========================================================================
   BASE
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--txt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- TYPE PRIMITIVES ---------- */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;                 /* mobile */
  line-height: 1.0;
  letter-spacing: var(--t-display-ls);
  color: var(--ink);
}
h1 { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1.05; letter-spacing: var(--t-h1-ls); color: var(--ink); }
h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.1;  letter-spacing: var(--t-h2-ls); color: var(--ink); }
h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); line-height: 1.25; letter-spacing: var(--t-h3-ls); color: var(--ink); }

.lede  { font-size: 17px; line-height: 1.5; color: var(--sub); }
.small { font-size: var(--t-small); color: var(--sub); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  color: var(--accent-deep);        /* accent-deep on light — NEVER --accent */
}

/* highlight word inside a headline (large text only — 4.32:1 = AA-large) */
.hl { color: var(--accent-deep); }
.on-dark .hl { color: var(--accent); }   /* on dark, use the bright accent */

/* ---------- LAYOUT ---------- */
.section { padding: var(--section-y) 0; }
.section--alt  { background: var(--bg-2); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lede, .section--dark .small { color: var(--on-dark-sub); }
.section--dark .eyebrow { color: var(--accent); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- COMPONENTS ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  padding: 16px 28px; border-radius: var(--r-md);
  background: var(--ink); color: #fff;
  text-decoration: none; border: none; cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn .arr { color: var(--accent); }

.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2);
}

.tag {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 6px 10px; color: var(--txt);
}

/* ---------- SCROLL REVEAL (progressive enhancement) ----------
   Content is VISIBLE by default. JS adds .js-reveal to <html>, which
   arms the animation. If JS fails, nothing is hidden. Never invert this. */
.reveal { opacity: 1; transform: none; }
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   DESKTOP
   ========================================================================== */
@media (min-width: 760px) {
  .section  { padding: var(--section-y-d) 0; }
  .container{ padding: 0 40px; }

  .display, h1.display { font-size: var(--t-display); }
  h1 { font-size: var(--t-h1); }
  h2 { font-size: var(--t-h2); }
  .lede { font-size: var(--t-lede); }
}