@import url("assets/design-system/content-primitives.css");

/* Portfolio expression of the shared Johnny Li design system.
   Shared header structure, controls, and compact menu geometry are package-owned. */

:root {
  --paper: var(--jl-color-canvas);
  --ink: var(--jl-color-ink);
  --muted: var(--jl-color-muted);
  --clay: var(--jl-color-accent-decorative);
  --clay-soft: var(--jl-color-accent-soft);
  --cream: var(--jl-color-surface);
  --rule: var(--jl-color-rule-strong);
  --ease-out: var(--jl-motion-ease-out);
  --shell: min(var(--jl-layout-portfolio-max), calc(100vw - 104px));
}

body {
  background:
    radial-gradient(var(--jl-color-canvas-dot) 0.55px, transparent 0.7px),
    var(--jl-color-canvas);
  background-size: 5px 5px;
  color: var(--jl-color-ink);
  font-family: var(--jl-font-ui);
}

::selection {
  background: var(--jl-color-selection-background);
  color: var(--jl-color-selection-text);
}

:focus-visible {
  outline: 2px solid var(--jl-color-focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--jl-color-focus-gap-light);
}

.contact-section {
  --_jl-focus-gap-color: var(--jl-color-focus-gap-dark);
  background: var(--jl-color-surface-inverse);
  color: var(--jl-color-text-inverse);
}

.contact-section :focus-visible,
.case-next :focus-visible,
.output-grid pre :focus-visible {
  box-shadow: 0 0 0 5px var(--jl-color-focus-gap-dark);
}

.work-description,
.experience-description,
.case-body-copy p,
.validation-copy p,
.output-note,
.knowledge-group-secondary h3,
.knowledge-group-secondary li {
  color: var(--jl-color-text);
}

/* Remove the portfolio's legacy animated-nav underline from the shared header. */
.jl-global-header a::after {
  display: none;
  content: none;
}

/* The old global nav breakpoint must never hide contact destinations. */
.contact-section .contact-links a:nth-child(n) {
  display: inline-flex;
}

#work,
#experience,
#about,
#contact {
  scroll-margin-top: calc(var(--jl-layout-header-height) + var(--jl-space-6));
}

@media (max-width: 560px) {
  :root {
    --shell: calc(100% - 32px);
  }
}