/*
 * Base: design tokens, fonts, reset, typography and layout. Every color in the theme comes from these tokens
 * (docs/design-system.md). Values follow the WebEquipe design system, Ember theme (design/ds/webequipe/tokens.css).
 */

@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  /* Design system (Ember) */
  --surface: #ffffff;
  --surface-alt: #f5f6f8;
  --line: #e2e5eb;
  --field-line: #8a92a3;
  --ink: #10131c;
  --ink-muted: #586072;
  --ember: #e8431f;
  --ember-press: #cf3814;
  --ember-ink: #a3300f;
  --ember-soft: #fde8e1;
  --on-ember: #ffffff;
  --cobalt: #2e56e6;
  --cobalt-soft: #e6ecff;
  --lagoon: #0b7a6e;
  --lagoon-soft: #ddf5f1;
  --sun: #f5a524;
  --sun-ink: #8a5300;
  --sun-soft: #fff3d6;
  --danger: #c0213b;
  --danger-soft: #fde4e8;
  --night: #0f1320;
  --on-night: #f2f3f6;
  /* Translucent steps of the two inks, for dark bands and soft shadows */
  --on-night-02: rgb(242 243 246 / 2%);
  --on-night-04: rgb(242 243 246 / 4%);
  --on-night-05: rgb(242 243 246 / 5%);
  --on-night-06: rgb(242 243 246 / 6%);
  --on-night-07: rgb(242 243 246 / 7%);
  --on-night-12: rgb(242 243 246 / 12%);
  --on-night-18: rgb(242 243 246 / 18%);
  --on-night-28: rgb(242 243 246 / 28%);
  --on-night-50: rgb(242 243 246 / 50%);
  --on-night-60: rgb(242 243 246 / 60%);
  --on-night-70: rgb(242 243 246 / 70%);
  --on-night-78: rgb(242 243 246 / 78%);
  --ink-07: rgb(16 19 28 / 7%);
  --ink-06: rgb(16 19 28 / 6%);
  --ink-08: rgb(16 19 28 / 8%);
  --ink-10: rgb(16 19 28 / 10%);
  --ink-12: rgb(16 19 28 / 12%);
  --ink-14: rgb(16 19 28 / 14%);
  --ink-18: rgb(16 19 28 / 18%);
  --ember-16: rgb(232 67 31 / 16%);
  --ember-28: rgb(232 67 31 / 28%);
  --ember-60: rgb(232 67 31 / 60%);
  --white-08: rgb(255 255 255 / 8%);
  --white-16: rgb(255 255 255 / 16%);
  --white-40: rgb(255 255 255 / 40%);
  --white-88: rgb(255 255 255 / 88%);
  --white-94: rgb(255 255 255 / 94%);
  --shadow-sm: 0 6px 24px rgb(16 19 28 / 5%);
  --shadow: 0 18px 50px rgb(16 19 28 / 8%);
  --shadow-lg: 0 26px 52px rgb(16 19 28 / 12%);
  --shadow-float: 0 10px 30px rgb(16 19 28 / 8%);

  /* Roles used by the templates */
  --color-bg: var(--surface);
  --color-bg-alt: var(--surface-alt);
  --color-surface: var(--surface);
  --color-text: var(--ink);
  --color-muted: var(--ink-muted);
  --color-border: var(--line);
  --color-primary: var(--ember-press);
  --color-primary-hover: var(--ember-ink);
  --color-on-primary: var(--on-ember);
  --color-accent: var(--ember-press);
  --color-error: var(--danger);
  --color-focus: var(--cobalt);

  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: var(--font-body);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-h3: 1.375rem;
  --text-h2: clamp(2rem, 1.2rem + 2.6vw, 3rem);
  --text-h1: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --container: 1192px;
  --gutter: 24px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-card: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --header-height: 80px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-height) + 16px); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--night); }
body { margin: 0; min-width: 320px; background: var(--color-bg); color: var(--color-text); font: 400 var(--text-base)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
a { color: var(--color-accent); }
a:hover { color: var(--ember-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
::selection { background: var(--ember-soft); color: var(--ink); }
[hidden] { display: none !important; }

.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.container.narrow { max-width: 760px; }
.section { padding-block: 80px; }
.section-alt { background: var(--color-bg-alt); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-2); top: -60px; z-index: 200; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--color-primary); color: var(--color-on-primary); }
.skip-link:focus { top: var(--space-2); }

/* Section head: label with a diamond, big title (*highlight* in ember), intro */
.head { display: flex; flex-direction: column; gap: 14px; max-width: 700px; }
.head.center { align-items: center; margin-inline: auto; text-align: center; }
.label { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-muted); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; }
.label::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--ember); transform: rotate(45deg); }
.h2 { font-size: var(--text-h2); line-height: 1.125; letter-spacing: -0.025em; }
.h2 em, .h1 em { font-style: normal; color: var(--ember-press); }
.lead { max-width: 44rem; color: var(--color-muted); font-size: var(--text-lg); line-height: 1.55; }
.lead + .lead { margin-top: var(--space-3); }
.muted { color: var(--ink-muted); font-size: 15px; }
.meta { color: var(--color-muted); font-size: var(--text-sm); }

/* Kept for older templates */
.page-title { margin-bottom: var(--space-4); font-size: var(--text-h1); letter-spacing: -0.035em; }
.eyebrow { margin-bottom: var(--space-3); color: var(--color-accent); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.section-heading { max-width: 720px; margin-bottom: var(--space-7); }
.section-heading h2 { font-size: var(--text-h2); }
.section-intro { margin-top: var(--space-4); color: var(--color-muted); font-size: var(--text-lg); }

.prose { max-width: 720px; font-size: var(--text-lg); line-height: 1.7; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.6em; font-size: 1.75rem; }
.prose h3 { margin-top: 1.4em; font-size: var(--text-h3); }
.prose img { border-radius: var(--radius-card); }

/* Entrance and scroll-reveal motion (off for reduced motion) */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.7s var(--ease) both; }
.d1 { animation-delay: 0.08s; } .d2 { animation-delay: 0.16s; } .d3 { animation-delay: 0.24s; } .d4 { animation-delay: 0.32s; }
@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
}

@media (max-width: 999px) {
  .section { padding-block: 64px; }
  .split { grid-template-columns: 1fr; gap: var(--space-7); }
}
@media (max-width: 599px) {
  :root { --gutter: 20px; --header-height: 72px; }
  .section { padding-block: 56px; }
  .head { gap: 10px; }
  .label { font-size: 11px; gap: 8px; }
  .label::before { width: 6px; height: 6px; }
  .lead { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}