/* ==========================================================================
   Code Charmer — global stylesheet
   Token layer, reset, and base typography. Implements DESIGN.md.
   Ported from the original Astro build; fonts are loaded by theme.json
   fontFace declarations, so there are no @font-face rules here.
   ========================================================================== */

@layer reset, tokens, base, utilities, rail;

/* ---------------------------------------------------------------- tokens -- */
@layer tokens {
  :root {
    /* — Light surfaces (home base) — */
    --bg:            oklch(0.980 0.004 214);
    --surface:       oklch(0.997 0.002 214);
    --surface-sunk:  oklch(0.955 0.006 214);
    --border:        oklch(0.905 0.008 214);
    --border-strong: oklch(0.845 0.010 214);

    /* — Ink (text on light) — */
    --ink:        oklch(0.225 0.020 232);
    --ink-muted:  oklch(0.450 0.018 232);
    --ink-faint:  oklch(0.560 0.014 232);

    /* — Deep-ink surfaces (art-directed bands) — */
    --ink-bg:     oklch(0.190 0.025 236);
    --ink-bg-2:   oklch(0.245 0.026 236);
    --on-ink:     oklch(0.965 0.005 214);
    --on-ink-mut: oklch(0.720 0.015 216);

    /* — Brand cyan — */
    --brand:      oklch(0.790 0.120 202);
    --brand-glow: oklch(0.830 0.130 200);
    --brand-ink:  oklch(0.480 0.100 216);
    --on-brand:   oklch(0.200 0.020 236);
    /* Surface-aware cyan for logo/accents: dark-enough on light, bright on ink */
    --logo-accent: var(--brand-ink);

    /* Form / status */
    --danger: oklch(0.520 0.170 26);

    /* — Typography — */
    --font-display: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', system-ui, sans-serif;
    --font-body:    'Hanken Grotesk Variable', 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono:    'Geist Mono Variable', 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

    --t-display: clamp(2.5rem, 1.2rem + 5.5vw, 5.25rem);
    --t-h1:      clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem);
    --t-h2:      clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem);
    --t-h3:      clamp(1.3rem, 1.05rem + 1.1vw, 1.65rem);
    --t-body-lg: 1.1875rem;
    --t-body:    1rem;
    --t-small:   0.8125rem;

    /* — Spacing (4px base) — */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-6: 1.5rem;   --sp-8: 2rem;    --sp-12: 3rem;   --sp-16: 4rem;
    --sp-24: 6rem;    --sp-32: 8rem;

    --section-y: clamp(4rem, 2rem + 9vw, 9rem);
    --gutter:    clamp(1.25rem, 5vw, 3rem);
    --maxw:      75rem;
    --maxw-prose: 68ch;

    /* — Depth & radius — */
    --radius-sm: 0.5rem; --radius: 0.75rem; --radius-lg: 1.25rem; --radius-pill: 999px;
    --shadow-sm: 0 1px 2px oklch(0.20 0.02 236 / 0.06);
    --shadow:    0 4px 16px -4px oklch(0.20 0.02 236 / 0.10), 0 1px 3px oklch(0.20 0.02 236 / 0.06);
    --shadow-lg: 0 24px 48px -12px oklch(0.20 0.02 236 / 0.16);

    /* — Motion — */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 180ms; --dur: 260ms; --dur-slow: 420ms; --dur-hero: 720ms;

    /* — Semantic z-index scale — */
    --z-base: 1; --z-dropdown: 100; --z-sticky: 200;
    --z-backdrop: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

    color-scheme: light;
  }
}

/* ----------------------------------------------------------------- reset -- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100svh; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
  :where(h1, h2, h3, h4) { line-height: 1.08; font-weight: 600; }
  p, li { text-wrap: pretty; }
}

/* ------------------------------------------------------------------ base -- */
@layer base {
  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    font-size: var(--t-body);
    color: var(--ink);
    background: var(--bg);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
    font-variation-settings: 'opsz' 36;
  }
  h1 { font-size: var(--t-h1); }
  h2 { font-size: var(--t-h2); }
  h3 { font-size: var(--t-h3); letter-spacing: -0.015em; font-weight: 600; }

  a { color: inherit; }

  /* Cyan link on light: dark-enough cyan + underline (per DESIGN.md rule) */
  .prose a,
  a.link {
    color: var(--brand-ink);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, var(--brand-ink) 45%, transparent);
    transition: text-decoration-color var(--dur-fast) var(--ease-out-quart);
  }
  .prose a:hover,
  a.link:hover { text-decoration-color: var(--brand-ink); }

  ::selection { background: var(--brand); color: var(--on-brand); }

  :focus-visible {
    outline: 2px solid var(--brand-ink);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Reduced motion: neutralize all animation/transition. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* — WordPress compatibility — */
  /* Sticky header must clear the admin bar for logged-in users. */
  .admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
  /* The block-group main needs no gap of its own; sections own their rhythm. */
  main.wp-block-group { display: block; }
}

/* ------------------------------------------------------------- utilities -- */
@layer utilities {
  .container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container--narrow { max-width: 58rem; }

  .section { padding-block: var(--section-y); }

  /* Deep-ink art-directed band */
  .band-ink {
    background: var(--ink-bg);
    color: var(--on-ink);
    --ink: var(--on-ink);
    --ink-muted: var(--on-ink-mut);
    --border: oklch(1 0 0 / 0.10);
    --border-strong: oklch(1 0 0 / 0.18);
    --surface: var(--ink-bg-2);
    --logo-accent: var(--brand-glow);
    color-scheme: dark;
  }
  .band-ink :where(h1, h2, h3) { color: var(--on-ink); }

  .flow > * + * { margin-block-start: var(--flow, 1em); }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-small);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--brand-ink);
    text-transform: none;
  }
  .band-ink .eyebrow { color: var(--brand-glow); }

  .prose { max-width: var(--maxw-prose); }
  .prose :where(p, ul, ol) + :where(p, h2, h3, ul, ol) { margin-block-start: 1em; }
  .prose :where(h2, h3) { margin-block-start: 1.75em; }
  .lead { font-size: var(--t-body-lg); color: var(--ink-muted); line-height: 1.55; }

  .visually-hidden,
  .screen-reader-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  .skip-link {
    position: absolute; top: -100%; left: var(--gutter); z-index: var(--z-tooltip);
    background: var(--ink); color: var(--on-ink); padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
  }
  .skip-link:focus { top: 0.75rem; }

  /* Buttons (ported from the Button component; blocks and seeded content use
     these classes directly). */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    border-radius: var(--radius-pill);
    padding: 0.7rem 1.4rem;
    transition:
      transform var(--dur-fast) var(--ease-out-quart),
      background-color var(--dur) var(--ease-out-quart),
      border-color var(--dur) var(--ease-out-quart),
      box-shadow var(--dur) var(--ease-out-quart);
  }
  .btn--lg { padding: 0.85rem 1.75rem; }
  .btn--primary {
    color: var(--on-brand);
    background: var(--brand);
    box-shadow: 0 1px 2px oklch(0.2 0.02 236 / 0.15);
  }
  .btn--primary:hover {
    background: var(--brand-glow);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px -8px oklch(0.79 0.12 202 / 0.5);
  }
  .btn--secondary {
    color: var(--ink);
    background: transparent;
    border: 1.5px solid var(--border-strong);
  }
  .btn--secondary:hover { border-color: var(--ink-muted); transform: translateY(-2px); }
  .btn--ghost {
    color: var(--brand-ink);
    padding-inline: 0.25rem;
  }
  .band-ink .btn--ghost { color: var(--brand-glow); }
  .btn__icon { display: inline-flex; transition: transform var(--dur) var(--ease-out-expo); }
  .btn:hover .btn__icon { transform: translateX(3px); }

  /* Scroll reveal — only engages when JS adds .reveals-ready AND motion is
     allowed. Default (no-JS / reduced-motion) leaves content fully visible. */
  .reveals-ready .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--dur-slow) var(--ease-out-quart),
      transform var(--dur-slow) var(--ease-out-quart);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .reveals-ready .reveal.is-in { opacity: 1; transform: none; }

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

  /* — About-page manifesto (seeded core columns carry these classes) — */
  .manifesto { gap: clamp(2rem, 5vw, 4rem) !important; }
  .manifesto__lead {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .manifesto__lead em { font-style: normal; color: var(--brand-ink); }
  .manifesto__p {
    font-size: var(--t-body-lg);
    color: var(--ink-muted);
    line-height: 1.6;
    max-width: 46ch;
  }
  .manifesto__p + .manifesto__p { margin-top: 1.25rem; }
  @media (min-width: 56rem) {
    .manifesto .wp-block-column:first-child { position: sticky; top: 7rem; align-self: flex-start; }
  }
}

/* Insight articles: post header chrome and long-form prose. */
@layer utilities {
  .post-header {
    padding-block-end: 0;
  }
  .post-header__inner {
    max-width: var(--maxw-prose);
  }
  .post-header__crumb {
    font-family: var(--font-mono);
    font-size: var(--t-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .post-header__crumb a {
    color: var(--brand-ink);
    text-decoration: none;
  }
  .post-header__crumb a:hover { text-decoration: underline; }
  .post-header__title {
    margin-top: 1rem;
    font-size: clamp(2rem, 4.5vw, 3rem);
    letter-spacing: -0.02em;
    line-height: 1.08;
  }
  .post-header__date {
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: var(--t-small);
    color: var(--ink-muted);
  }
  .post-body { padding-block-start: clamp(1.5rem, 3vw, 2.5rem); }

  .prose ul,
  .prose ol {
    list-style: revert;
    padding-inline-start: 1.4em;
  }
  .prose li + li { margin-block-start: 0.4em; }
  .prose blockquote {
    margin-block: 1.5em;
    padding-inline-start: 1.1em;
    border-inline-start: 2px solid var(--brand);
    color: var(--ink-muted);
  }
  .prose pre {
    margin-block: 1.5em;
    padding: 1rem 1.25rem;
    background: var(--ink-bg);
    color: var(--on-ink);
    border-radius: var(--radius);
    overflow-x: auto;
  }
  .prose pre,
  .prose code {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }
  .prose :not(pre) > code {
    padding: 0.15em 0.4em;
    background: var(--surface-sunk);
    border-radius: 0.3em;
  }
  .prose figure { margin-block: 1.75em; }
  .prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
  }
  .prose figcaption {
    margin-top: 0.6em;
    font-family: var(--font-mono);
    font-size: var(--t-small);
    color: var(--ink-muted);
  }
  .prose table {
    margin-block: 1.5em;
    width: 100%;
    border-collapse: collapse;
  }
  .prose th {
    font-family: var(--font-mono);
    font-size: var(--t-small);
    text-align: start;
  }
  .prose th,
  .prose td {
    padding: 0.55em 0.75em 0.55em 0;
    border-block-end: 1px solid var(--border);
  }
  .prose hr {
    margin-block: 2em;
    border: 0;
    border-block-start: 1px solid var(--border);
  }
  .prose h4 { margin-block-start: 1.5em; }
}

/* Outside all layers on purpose: WordPress's global-styles link rule
   (a:where(:not(.wp-element-button)) { color: inherit }) is unlayered and
   therefore out-cascades every @layer rule above. These restore the
   theme's own link and button colors over it. */
a.btn--primary { color: var(--on-brand); }
a.btn--secondary { color: var(--ink); }
a.btn--ghost { color: var(--brand-ink); }
.band-ink a.btn--ghost { color: var(--brand-glow); }
a.link,
.prose a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}
.band-ink a.link { color: var(--brand-glow); }