/*
 * Entry stylesheet. Declares the cascade layer order once; every other file puts
 * its rules into one of these layers (ADR 0006). Later layers win regardless of
 * selector specificity, so utilities always override components.
 *
 * Files are loaded as separate <link> elements in the base layout instead of
 * @import, so the browser fetches them in parallel.
 */
@layer reset, tokens, base, layout, components, utilities;

/* css/base.css */
@layer base {
  body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-surface);
    line-height: 1.65;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary-dark);
    line-height: 1.2;
  }
  h1 { font-size: clamp(2rem, 5vw, 3rem); }
  h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); }

  a { color: var(--color-primary); }
  a:hover { color: var(--color-accent); }

  :focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
  }

  /* HTMX indicators. htmx's own injected <style> is disabled because the CSP
     forbids inline styles, so the rules live here. */
  .htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
  .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
}

/* css/components/error-page.css */
@layer components {
  .error-page {
    padding-block: var(--space-6);
    text-align: center;

    & .error-code { font-size: 4rem; color: var(--color-accent); font-family: var(--font-heading); }
    & .error-reference { color: var(--color-text-muted); font-size: 0.9rem; }
  }
}

/* css/components/site-footer.css */
@layer components {
  .site-footer {
    margin-block-start: var(--space-6);
    padding-block: var(--space-5);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: 0.9rem;
  }
}

/* css/components/site-header.css */
@layer components {
  .site-header {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: var(--color-on-primary);
    box-shadow: var(--shadow);

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

    & a { color: inherit; text-decoration: none; }
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;

    & img { width: 2.75rem; height: 2.75rem; }
  }

  .language-switch {
    display: flex;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;

    & a[aria-current] { text-decoration: underline; text-underline-offset: 0.3em; }
  }

  .skip-link {
    position: absolute;
    left: var(--space-3);
    top: var(--space-3);
    z-index: 100;
    background: var(--color-surface);
    padding: var(--space-2) var(--space-3);
  }
}

/* css/layout.css */
@layer layout {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  main { flex: 1 0 auto; }

  .container {
    width: min(100% - 2 * var(--space-4), var(--content-width));
    margin-inline: auto;
  }

  .stack > * + * { margin-block-start: var(--space-3); }
}

/* css/reset.css */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  img, picture, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }
}

/* css/tokens.css */
/*
 * Design tokens. Colors continue the PoC theme (Bordeaux and gold on cream).
 * Components use only these custom properties, never raw values.
 * Fonts are self-hosted with #44; until then the system stacks apply.
 */
@layer tokens {
  :root {
    --color-primary: #6e1423;
    --color-primary-dark: #4a0e18;
    --color-accent: #b8892f;
    --color-accent-light: #d9b872;
    --color-surface: #faf6ef;
    --color-surface-alt: #f0e8d8;
    --color-text: #2b2320;
    --color-text-muted: #5c5148;
    --color-on-primary: #faf6ef;

    --font-body: "Source Sans 3", system-ui, sans-serif;
    --font-heading: "Cormorant Garamond", Georgia, serif;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;

    --radius: 14px;
    --shadow: 0 8px 24px rgb(74 14 24 / 0.1);
    --content-width: 72rem;
  }
}

/* css/utilities.css */
@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}