@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   Cascade layers — explicit ordering prevents specificity wars
   ============================================================ */
@layer reset, tokens, base, layout, components, utilities;

/* ============================================================
   @layer tokens
   ============================================================ */
@layer tokens {

  /* Registered custom properties — enable interpolation + type checking */
  @property --ink        { syntax: "<color>"; inherits: true;  initial-value: #0f0f0e; }
  @property --ink-2      { syntax: "<color>"; inherits: true;  initial-value: #3d3d3a; }
  @property --ink-3      { syntax: "<color>"; inherits: true;  initial-value: #4f4f4a; }
  @property --ink-4      { syntax: "<color>"; inherits: true;  initial-value: #72726c; }
  @property --paper      { syntax: "<color>"; inherits: true;  initial-value: #fafaf8; }
  @property --paper-2    { syntax: "<color>"; inherits: true;  initial-value: #f1f0eb; }
  @property --paper-3    { syntax: "<color>"; inherits: true;  initial-value: #e6e5de; }
  @property --focus-ring { syntax: "<color>"; inherits: true;  initial-value: #0f0f0e; }

  :root {
    /* ── Colour (light — default) ── */
    --ink:        #0f0f0e;   /* 18.35:1 on --paper  ✓ AAA */
    --ink-2:      #3d3d3a;   /* 10.43:1 on --paper  ✓ AAA */
    --ink-3:      #4f4f4a;   /*  7.88:1 on --paper  ✓ AAA */
    --ink-4:      #72726c;   /*  4.63:1 on --paper  ✓ AA  (supporting text) */
    --paper:      #fafaf8;
    --paper-2:    #f1f0eb;
    --paper-3:    #e6e5de;
    --rule:       color-mix(in oklab, var(--ink) 12%, transparent);
    --rule-strong:color-mix(in oklab, var(--ink) 25%, transparent);
    --focus-ring: #0f0f0e;

    /* ── Typography ── */
    --serif:  'Lora', Georgia, 'Times New Roman', serif;
    --mono:   'JetBrains Mono', 'Fira Mono', 'Cascadia Code', monospace;
    --sans:   system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Fluid type scale (clamp: min | preferred | max)
          No viewport-only units — always includes a rem floor for reflow.
          SC 1.4.4 (resize text) + SC 1.4.10 (reflow) ── */
    --step--1: clamp(0.75rem,  0.71rem + 0.18vw, 0.8125rem);
    --step-0:  clamp(1rem,     0.95rem + 0.24vw, 1.0625rem);
    --step-1:  clamp(1.125rem, 1.04rem + 0.41vw, 1.25rem);
    --step-2:  clamp(1.25rem,  1.12rem + 0.63vw, 1.5rem);
    --step-3:  clamp(1.5rem,   1.31rem + 0.94vw, 1.875rem);
    --step-4:  clamp(1.875rem, 1.58rem + 1.41vw, 2.375rem);

    /* ── Fluid space (utopia-style pairs) ── */
    --space-3xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.3125rem);
    --space-2xs: clamp(0.5rem,  0.47rem + 0.16vw, 0.5625rem);
    --space-xs:  clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem);
    --space-s:   clamp(1rem,    0.95rem + 0.24vw, 1.0625rem);
    --space-m:   clamp(1.5rem,  1.42rem + 0.39vw, 1.6875rem);
    --space-l:   clamp(2rem,    1.89rem + 0.55vw, 2.375rem);
    --space-xl:  clamp(3rem,    2.84rem + 0.78vw, 3.5rem);
    --space-2xl: clamp(4rem,    3.79rem + 1.04vw, 4.75rem);

    /* ── Layout ──
          Use min() not max-width to avoid reflow failure at 320px.
          SC 1.4.10: content must reflow at 320px without horizontal scroll. ── */
    --col-prose: min(42rem, 100%);
    --col-wide:  min(56rem, 100%);
    --gutter:    clamp(1rem, 4vw, 2rem);

    /* ── Misc ── */
    --radius:    4px;
    --radius-lg: 8px;
    --transition: 150ms ease;

    /* ── Focus ring (WCAG 2.4.11 / 2.4.12 AAA) ──
          Minimum 2px, 3:1 contrast against adjacent colours ── */
    --focus-width:  3px;
    --focus-offset: 3px;
  }

  /* ── Dark mode ── */
  [data-theme="dark"] {
    --ink:         #f0efe8;   /* 16:1    on dark paper ✓ AAA */
    --ink-2:       #c8c7be;   /* 10.86:1 on dark paper ✓ AAA */
    --ink-3:       #bcbcb4;   /*  9.65:1 on dark paper ✓ AAA */
    --ink-4:       #8a8a80;   /*  5.29:1 on dark paper ✓ AA  */
    --paper:       #141412;
    --paper-2:     #1e1d1a;
    --paper-3:     #2a2925;
    --rule:        color-mix(in oklab, var(--ink) 10%, transparent);
    --rule-strong: color-mix(in oklab, var(--ink) 22%, transparent);
    --focus-ring:  #f0efe8;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ink:         #f0efe8;
      --ink-2:       #c8c7be;
      --ink-3:       #bcbcb4;
      --ink-4:       #8a8a80;
      --paper:       #141412;
      --paper-2:     #1e1d1a;
      --paper-3:     #2a2925;
      --rule:        color-mix(in oklab, var(--ink) 10%, transparent);
      --rule-strong: color-mix(in oklab, var(--ink) 22%, transparent);
      --focus-ring:  #f0efe8;
    }
  }
}

/* ============================================================
   @layer reset
   ============================================================ */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    hanging-punctuation: first last;
  }

  body {
    min-height: 100svh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  input, button, textarea, select {
    font: inherit;
  }

  p, h1, h2, h3, h4 {
    overflow-wrap: break-word;
  }

  /* Remove list semantics only when list-style is none and role is explicit */
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }
}

/* ============================================================
   @layer base
   ============================================================ */
@layer base {

  html {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--step-0);
    transition:
      background var(--transition),
      color var(--transition);
  }

  /* ── Focus styles (WCAG 2.4.11 Focus Appearance AAA) ──
        2.4.7 Focus Visible AA is met by these too.
        3px solid ring + 3px offset = clearly visible on any background.
        The outline-color uses the registered --focus-ring which
        switches with the theme so contrast is always maintained. ── */
  :focus-visible {
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius);
  }

  /* Remove focus ring from mouse clicks — only keyboard gets it */
  :focus:not(:focus-visible) {
    outline: none;
  }

  a {
    color: inherit;
    text-decoration-color: var(--rule-strong);
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--transition);

    &:hover {
      text-decoration-color: var(--ink);
    }
  }

  /* ── Skip link (WCAG 2.4.1 Bypass Blocks) ── */
  .skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--space-s);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: var(--step--1);
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--radius);
    text-decoration: none;
    z-index: 9999;
    transition: inset-block-start var(--transition);

    &:focus {
      inset-block-start: var(--space-s);
    }
  }

  /* ── Visually hidden (accessible to screen readers) ── */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* ── Reduced motion (WCAG 2.3.3 Animation from Interactions AAA) ── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    html {
      scroll-behavior: auto;
    }
  }
}

/* ============================================================
   @layer layout
   ============================================================ */
@layer layout {

  /* ── Site shell ── */
  .site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }

  main {
    flex: 1;
  }

  /* ── Container ──
        Uses --gutter (fluid) + width: min() for reflow safety.
        SC 1.4.10: no overflow at 320px logical width. ── */
  .container {
    width: var(--col-wide);
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--prose {
    width: var(--col-prose);
  }

  /* ── Header ── */
  .site-header {
    border-block-end: 1px solid var(--rule);
    padding-block: var(--space-s);

    & .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-s);
      flex-wrap: wrap;
    }
  }

  /* ── Footer ── */
  .site-footer {
    border-block-start: 1px solid var(--rule);
    padding-block: var(--space-xl);
    margin-block-start: var(--space-2xl);

    & .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-s);
      flex-wrap: wrap;
    }
  }
}

/* ============================================================
   @layer components
   ============================================================ */
@layer components {

  /* ── Site name ── */
  .site-name {
    font-family: var(--serif);
    font-size: var(--step-1);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--ink);
  }

  /* ── Nav ── */
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    flex-wrap: wrap;
  }

  .nav-link {
    font-family: var(--sans);
    font-size: var(--step--1);
    color: var(--ink-3);
    text-decoration: none;
    letter-spacing: 0.01em;
    /* SC 2.5.8 Target Size Minimum (24×24px) ── */
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    transition: color var(--transition);

    &:hover,
    &[aria-current="page"] {
      color: var(--ink);
    }

    &[aria-current="page"] {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }

  /* ── Theme toggle ──
        SC 2.5.8: min 44×44px touch target ── */
  .theme-toggle {
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    background: var(--paper-2);
    color: var(--ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--step--1);
    flex-shrink: 0;
    transition:
      background var(--transition),
      color var(--transition);

    &:hover {
      background: var(--paper-3);
      color: var(--ink);
    }
  }

  /* ── Tags ── */
  .tag {
    display: inline-block;
    font-family: var(--sans);
    font-size: var(--step--1);
    letter-spacing: 0.02em;
    padding-block: 0.2em;
    padding-inline: 0.6em;
    border-radius: var(--radius);
    background: var(--paper-2);
    border: 1px solid var(--paper-3);
    color: var(--ink-3);
    text-decoration: none;
    /* SC 2.5.8 ── */
    min-block-size: 24px;
    transition:
      background var(--transition),
      color var(--transition);

    &:hover {
      background: var(--paper-3);
      color: var(--ink-2);
    }
  }

  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    list-style: none;
    padding: 0;
  }

  /* ── Footer text ── */
  .footer-note {
    font-family: var(--sans);
    font-size: var(--step--1);
    color: var(--ink-4);
  }

  .footer-links {
    display: flex;
    gap: var(--space-s);
    flex-wrap: wrap;

    & a {
      font-family: var(--sans);
      font-size: var(--step--1);
      color: var(--ink-4);
      text-decoration: none;
      min-block-size: 44px;
      display: inline-flex;
      align-items: center;
      transition: color var(--transition);

      &:hover {
        color: var(--ink-2);
      }
    }
  }
}

/* ============================================================
   @layer utilities
   ============================================================ */
@layer utilities {
  .text-muted   { color: var(--ink-4); }
  .text-subtle  { color: var(--ink-3); }
  .font-serif   { font-family: var(--serif); }
  .font-mono    { font-family: var(--mono); }
  .flow > * + * { margin-block-start: var(--space-s); }
}