/* AllYn — B-style design tokens (canonical) */
:root, [data-theme="dark"] {
  /* Brand */
  --ink: #0e1a1a;          /* deep teal background */
  --ink-2: #142323;        /* lighter card surface */
  --ink-3: #1c2e2e;        /* hover surface */
  --line: rgba(244,241,234,.12);
  --line-2: rgba(244,241,234,.22);

  --paper: #f4f1ea;        /* primary text on dark */
  --paper-2: #cdd5d5;      /* secondary text */
  --paper-3: #9ba8a8;      /* muted */

  --cyan: #88ddcc;         /* brand accent */
  --cyan-dim: #5fb6a4;

  /* Themed surface helpers */
  --ink-translucent: rgba(14,26,26,.85);
  --ink-overlay: rgba(14,26,26,.96);
  --cyan-tint: rgba(136,221,204,.04);
}

/* Light mode — inverts ink/paper while preserving contrast roles */
[data-theme="light"] {
  --ink: #f4f1ea;          /* paper background */
  --ink-2: #ebe6dc;        /* card surface */
  --ink-3: #ddd6c8;        /* hover surface */
  --line: rgba(14,26,26,.10);
  --line-2: rgba(14,26,26,.18);

  --paper: #0e1a1a;        /* primary text on light */
  --paper-2: #2a3838;      /* secondary text */
  --paper-3: #5a6868;      /* muted */

  --cyan: #1a8d76;         /* darker cyan for AA contrast on light */
  --cyan-dim: #0e6a58;

  /* Themed surface helpers */
  --ink-translucent: rgba(244,241,234,.85);
  --ink-overlay: rgba(244,241,234,.96);
  --cyan-tint: rgba(26,141,118,.06);
}

/* Type & layout (theme-agnostic) */
:root {
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --gutter: clamp(32px, 6vw, 96px);
  --max-w: 1440px;
}

/* Theme transitions */
html, body { transition: background-color .25s ease, color .25s ease; }

* { box-sizing: border-box; }

/* Centered content wrapper — used inside sections that have padding: var(--gutter) */
.container { max-width: var(--max-w); margin-inline: auto; width: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--paper);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--cyan); color: var(--ink); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.ph-stripe {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(136,221,204,.06) 0 8px,
    rgba(136,221,204,0) 8px 16px
  );
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--paper-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--cyan); color: var(--ink);
  padding: 18px 26px; font-family: var(--mono); font-size: 12px;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border: none;
}
.btn-primary:hover { background: #a5e5d6; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 12px;
  background: transparent; color: var(--paper);
  padding: 18px 26px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

input, textarea, select {
  font-family: var(--sans);
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line-2);
  outline: none;
}
input:focus, textarea:focus { border-color: var(--cyan); }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html, body { transition: none; }
}