/* Wylse — design tokens
   White page, white hero, alternating solid-black sections.
   Accents: blue-violet (primary), yellow (borders/rules only). */

:root {
  /* Core surfaces — page is mostly white + light gray, text mostly black */
  --white: #ffffff;
  --gray-25: #fbfbfc;
  --gray-50: #f6f6f8;
  --gray-100: #eeeef1;
  --black: #0a0a0b;
  --ink: #121214;
  --ink-2: #3a3a40;
  --ink-3: #6b6b73;
  --rule: #e6e6ea;

  /* Blue-violet accent ramp */
  --violet-50:  #f2f0ff;
  --violet-100: #e4e0ff;
  --violet-300: #a89cff;
  --violet-500: #6a4bff;  /* primary */
  --violet-600: #573bdb;
  --violet-700: #4530b0;
  --violet-on-black: #9d8cff; /* AA on --black */

  /* Yellow — borders, rules, underlines. Never body text on white. */
  --yellow-300: #ffe57a;
  --yellow-400: #ffd43b;  /* primary border */
  --yellow-500: #f0bb00;
  --yellow-on-white-text: #6b4e00; /* if yellow must carry text */

  /* Semantic */
  --accent: var(--violet-500);
  --accent-hover: var(--violet-600);
  --border-accent: var(--yellow-400);
  --border-w: 2px;

  /* Type scale */
  --f-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-hero: clamp(2.75rem, 6vw, 5rem);
  --t-h2:   clamp(2rem, 4vw, 3.25rem);
  --t-h3:   clamp(1.25rem, 2vw, 1.6rem);
  --t-body: clamp(1rem, 1.1vw, 1.125rem);
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* Rhythm */
  --sp-section: clamp(4rem, 9vw, 8rem);
  --maxw: 1200px;
  --maxw-prose: 68ch;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light-gray band — the default alternator against white */
.band--gray {
  background: var(--gray-50);
  color: var(--ink);
}
.band--gray .card { background: var(--white); }

/* Black sections invert the ink ramp. Used sparingly — one or two
   anchor moments only, not as the general alternator. */
.band--black {
  --ink: #f5f5f7;
  --ink-2: #b8b8c0;
  --ink-3: #85858f;
  --rule: #26262c;
  --accent: var(--violet-on-black);
  background: var(--black);
  color: var(--ink);
}