/* ══════════════════════════════════════════════════════════════════════════
   Alev-B design language — tokens, type, primitives.
   ══════════════════════════════════════════════════════════════════════════

   This is the shared layer: every page in the pilot links it. It defines the
   palette, the two typefaces and a handful of primitives, and nothing else —
   page layout lives with the page, and the overrides for the *generated*
   tracker live in tracker.css beside this file.

   ── Where the values come from ───────────────────────────────────────────
   The OKLCH values are the Alev-B design system's own tokens, copied from the
   brand site's stylesheet rather than eyeballed from a screenshot. Keeping
   them in OKLCH (instead of converting to hex here) means a future change on
   the brand side is a diff in the same notation, not a re-derivation.

   ── Contrast is measured, not assumed ────────────────────────────────────
   Gold on cream is the trap in this palette, and it is worse than it looks:

       white on brand gold ......... 2.50:1   fails AA outright
       brand gold on cream ......... 2.30:1   unusable as text, and too weak
                                              even for a focus ring (needs 3:1)

   So the theme treats gold as a *surface and a signature*, never as text, and
   puts near-black warm ink on it — which is what the brand's own
   `--primary-foreground` token says too. Anywhere gold has to carry meaning
   as a line or a label, `--ab-gold-deep` is used instead: same hue, dropped to
   L 0.55, which clears 4.5:1 on every background here.

   Every pair is computed in scripts/check-contrast.mjs. Run it after touching
   a colour — it fails a build rather than a review.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Type ─────────────────────────────────────────────────────────────────
   Self-hosted, from the brand site's own subsets. Two reasons over the
   Google-hosted link the generated client uses: the visitor's IP never reaches
   a third party, and `font-src` in the CSP can stay at 'self'.
   The `unicode-range` split is what keeps this cheap — a German page never
   downloads the 85 KB latin-ext file. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/theme/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/theme/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/theme/fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/theme/fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── Brand ───────────────────────────────────────────────────────────── */
  --ab-gold: oklch(0.72 0.12 85); /* the signature. surfaces and marks only  */
  --ab-gold-dark: oklch(0.62 0.12 85); /* pressed / gradient end             */
  --ab-gold-deep: oklch(0.55 0.12 85); /* gold that must carry meaning: 4.5:1 */
  --ab-gold-tint: oklch(0.95 0.03 85); /* the faintest wash of it            */
  --ab-gold-ink: oklch(0.15 0.02 60); /* what goes ON gold. never white.     */
  --ab-brown: oklch(0.55 0.08 60); /* accent surface                         */
  --ab-brown-text: oklch(0.5 0.08 60); /* the same brown, safe as text       */
  --ab-brown-ink: oklch(0.97 0.008 80); /* what goes ON brown                */

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --ab-bg: oklch(0.97 0.008 80); /* cream page                              */
  --ab-surface: oklch(0.95 0.01 80); /* beige band, inset areas             */
  --ab-card: oklch(1 0 0);
  --ab-muted-bg: oklch(0.93 0.012 80);

  /* ── Ink ─────────────────────────────────────────────────────────────── */
  --ab-fg: oklch(0.25 0.02 60);
  --ab-fg-muted: oklch(0.5 0.03 60);
  --ab-fg-faint: oklch(0.6 0.025 60); /* decorative only — not body text     */

  /* ── Lines ───────────────────────────────────────────────────────────── */
  --ab-border: oklch(0.88 0.015 80);
  --ab-border-strong: oklch(0.82 0.02 80);
  --ab-ring: oklch(0.55 0.12 85); /* focus. 4.5:1 on cream, card and beige   */

  /* ── State ───────────────────────────────────────────────────────────── */
  --ab-danger: oklch(0.5 0.19 27);
  --ab-danger-bg: oklch(0.96 0.02 27);
  --ab-danger-border: oklch(0.88 0.06 27);

  /* ── Shape and depth ─────────────────────────────────────────────────── */
  /* 0.5rem is the brand radius; controls sit one step up, cards two, so the
     hierarchy is visible without any of it becoming a pill. */
  --ab-radius: 0.5rem;
  --ab-radius-control: 10px;
  --ab-radius-card: 16px;

  /* Two-part shadows, from the brand site: a tight contact shadow plus a wide
     soft one. The lift adds a gold cast rather than more black, which is what
     keeps the warm palette from going grey on hover. */
  --ab-shadow-sm: 0 1px 3px rgba(45, 42, 38, 0.06), 0 1px 2px rgba(45, 42, 38, 0.04);
  --ab-shadow-md: 0 4px 16px rgba(45, 42, 38, 0.05), 0 1px 3px rgba(45, 42, 38, 0.04);
  --ab-shadow-lift: 0 12px 28px -4px rgba(45, 42, 38, 0.1), 0 4px 12px -2px rgba(196, 168, 107, 0.08);
  --ab-focus-ring: 0 0 0 3px rgba(145, 106, 0, 0.28);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ab-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ab-fast: 160ms;
  --ab-normal: 260ms;

  /* ── Type ────────────────────────────────────────────────────────────── */
  --ab-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ab-font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* ── Rhythm ──────────────────────────────────────────────────────────── */
  /* One scale, used everywhere, so vertical spacing is a choice from a set
     rather than a fresh number each time. */
  --ab-1: 4px;
  --ab-2: 8px;
  --ab-3: 12px;
  --ab-4: 16px;
  --ab-5: 24px;
  --ab-6: 32px;
  --ab-7: 48px;
  --ab-8: 72px;
  --ab-section: clamp(56px, 9vw, 96px);
}

/* ══ Primitives ══════════════════════════════════════════════════════════
   Deliberately few. These are the parts the entry pages share; anything used
   once belongs in the page that uses it. */

/* Scoped to the pages this project wrote — the generated client sets its own
   and must not be reached. Without it a full-width button is its content box
   *plus* 48px of padding, which is exactly how a phone ends up scrolling
   sideways by 34 pixels. */
.ab-page,
.ab-page *,
.ab-page *::before,
.ab-page *::after {
  box-sizing: border-box;
}

.ab-page {
  margin: 0;
  background: var(--ab-bg);
  color: var(--ab-fg);
  font-family: var(--ab-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.ab-h1,
.ab-h2,
.ab-h3 {
  font-family: var(--ab-font-head);
  font-weight: 600;
  color: var(--ab-fg);
  letter-spacing: -0.015em;
  margin: 0;
  /* Playfair's leading is loose at display sizes and tight at small ones, so
     it is set per level rather than inherited. */
  text-wrap: balance;
}
.ab-h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.12;
}
.ab-h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  line-height: 1.2;
}
.ab-h3 {
  font-size: 1.1875rem;
  line-height: 1.35;
}

.ab-lede {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ab-fg-muted);
  max-width: 62ch;
  margin: 0;
}

.ab-card {
  background: var(--ab-card);
  border: 1px solid var(--ab-border);
  border-radius: var(--ab-radius-card);
  box-shadow: var(--ab-shadow-sm);
}

/* ── Controls ───────────────────────────────────────────────────────────
   46px minimum height on every interactive control, so a thumb can hit it.
   min-height rather than padding alone, so a short label cannot shrink it
   below the 44px touch-target floor. */
.ab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ab-2);
  min-height: 46px;
  padding: 12px 24px;
  border-radius: var(--ab-radius-control);
  border: 1px solid transparent;
  font-family: var(--ab-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--ab-normal) var(--ab-ease),
    box-shadow var(--ab-normal) var(--ab-ease),
    border-color var(--ab-normal) var(--ab-ease),
    transform var(--ab-fast) var(--ab-ease);
}

.ab-btn-primary {
  /* Dark ink on gold — 7.9:1. White would be 2.5:1, which is the single most
     tempting mistake in this palette. */
  background: linear-gradient(135deg, var(--ab-gold), var(--ab-gold-dark));
  color: var(--ab-gold-ink);
  border-color: var(--ab-gold-dark);
}
.ab-btn-primary:disabled {
  opacity: 0.55;
  cursor: default;
}

.ab-btn-secondary {
  background: transparent;
  color: var(--ab-brown-text);
  border-color: var(--ab-border-strong);
}

@media (hover: hover) and (pointer: fine) {
  .ab-btn-primary:not(:disabled):hover {
    box-shadow: 0 6px 18px -4px rgba(196, 168, 107, 0.5);
    transform: translateY(-1px);
  }
  .ab-btn-secondary:hover {
    background: var(--ab-gold-tint);
    border-color: var(--ab-gold-deep);
    color: var(--ab-gold-ink);
  }
}
.ab-btn:not(:disabled):active {
  transform: translateY(0) scale(0.985);
}

.ab-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--ab-border);
  border-radius: var(--ab-radius-control);
  background: var(--ab-card);
  color: var(--ab-fg);
  font-family: var(--ab-font-body);
  font-size: 1rem; /* 16px — anything smaller makes iOS Safari zoom on focus */
  line-height: 1.4;
  transition:
    border-color var(--ab-fast) var(--ab-ease),
    box-shadow var(--ab-fast) var(--ab-ease);
}
.ab-input::placeholder {
  color: var(--ab-fg-faint);
}
.ab-input:focus {
  outline: none;
  border-color: var(--ab-gold-deep);
  box-shadow: var(--ab-focus-ring);
}
.ab-input:disabled,
.ab-input[readonly] {
  background: var(--ab-muted-bg);
  color: var(--ab-fg-muted);
}

.ab-label {
  display: block;
  margin: 0 0 var(--ab-1);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ab-fg);
}

.ab-link {
  color: var(--ab-brown-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--ab-brown-text) 40%, transparent);
  transition: color var(--ab-fast) var(--ab-ease);
}
.ab-link:hover {
  color: var(--ab-gold-ink);
  text-decoration-color: currentColor;
}

/* One focus treatment for everything, and it is never removed — only replaced
   by the ring above where a control styles its own border. */
.ab-page :focus-visible {
  outline: 2px solid var(--ab-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The gold hairline that separates sections on the brand site. */
.ab-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklab, var(--ab-gold) 55%, transparent),
    transparent
  );
}

@media (prefers-reduced-motion: reduce) {
  .ab-page *,
  .ab-page *::before,
  .ab-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}