/* Entry stylesheet. Order: Tailwind, tokens, theme mapping, base, motion. */
@import 'tailwindcss';
@import './tokens.css';
@import './motion.css';

/*
  Map design tokens into Tailwind's theme namespaces with `inline` so generated
  utilities reference the live CSS variables — theme switching works at runtime
  without regenerating classes (ARCHITECTURE A4). Tailwind's default 0.25rem
  spacing scale already matches our 8pt grid, so no spacing override is needed.
*/
@theme inline {
  --color-surface-0: var(--surface-0);
  --color-surface-1: var(--surface-1);
  --color-surface-2: var(--surface-2);
  --color-ink: var(--ink);
  --color-ink-muted: var(--ink-muted);
  --color-ink-faint: var(--ink-faint);
  --color-line: var(--border);
  --color-line-strong: var(--border-strong);
  --color-accent: var(--accent);
  --color-accent-ink: var(--accent-ink);
  --color-amber: var(--amber);
  --color-danger: var(--danger);

  --font-display: var(--font-display);
  --font-body: var(--font-body);
  --font-mono: var(--font-mono);

  --text-display: var(--text-display);
  --text-h1: var(--text-h1);
  --text-h2: var(--text-h2);
  --text-h3: var(--text-h3);
  --text-h4: var(--text-h4);
  --text-body-lg: var(--text-body-lg);
  --text-body: var(--text-body);
  --text-small: var(--text-small);
  --text-mono-label: var(--text-mono-label);
  --text-mono-meta: var(--text-mono-meta);

  --radius-xs: var(--radius-xs);
  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-full: var(--radius-full);
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchor scroll offset = header + breathing room (SPACING_SYSTEM §6). */
    scroll-padding-top: calc(var(--header-h) + var(--space-5));
  }

  body {
    margin: 0;
    background-color: var(--surface-0);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--leading-snug);
    margin: 0;
    text-wrap: balance;
  }

  p {
    margin: 0;
    text-wrap: pretty;
  }

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

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

  button {
    font: inherit;
    color: inherit;
    cursor: pointer;
  }

  /* Visible focus in both themes (COLOUR_SYSTEM §5, TYPOGRAPHY §4). */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  :focus:not(:focus-visible) {
    outline: none;
  }

  ::selection {
    background: var(--accent);
    color: var(--accent-ink);
  }
}

@layer components {
  /* Faint blueprint dot-grid — hero + section headers only (DESIGN_SYSTEM §4). */
  .dot-grid {
    background-image: radial-gradient(var(--dot-grid) 1px, transparent 1px);
    background-size: 24px 24px;
  }

  /* Single permitted gradient: hero accent halo (COLOUR_SYSTEM §4). */
  .hero-halo {
    background: radial-gradient(55% 55% at 28% 18%, var(--halo), transparent 70%);
  }

  /* Mono metadata label — the identity voice (TYPOGRAPHY §2). */
  .mono-label {
    font-family: var(--font-mono);
    font-size: var(--text-mono-label);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .mono-meta {
    font-family: var(--font-mono);
    font-size: var(--text-mono-meta);
    color: var(--ink-muted);
  }

  /* Constrained prose measure for long-form case-study body (TYPOGRAPHY §3). */
  .prose-measure {
    max-width: var(--measure);
  }

  /* Skip-link: off-screen until focused (MICRO_INTERACTIONS, a11y). */
  .skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transform: translateY(-150%);
    transition: transform var(--dur-quick) var(--ease-out);
  }
  .skip-link:focus {
    transform: translateY(0);
  }

  /* Theme-toggle icon swap driven purely by the [data-theme] attribute. */
  .icon-sun {
    display: none;
  }
  :root[data-theme='light'] .icon-sun {
    display: block;
  }
  :root[data-theme='light'] .icon-moon {
    display: none;
  }

  /* Native <details> CV menu: hide the default disclosure marker. */
  .cv-menu > summary {
    list-style: none;
  }
  .cv-menu > summary::-webkit-details-marker {
    display: none;
  }
  .cv-menu > summary::marker {
    content: '';
  }
}

/* High-contrast / forced-colors: drop decorative texture (COLOUR_SYSTEM §5). */
@media (forced-colors: active) {
  .dot-grid,
  .hero-halo {
    background: none;
  }
}
