/* ---------------------------------------------------------------------------
   Design tokens — PLACEHOLDER values (§5.2). The brand refresh replaces these
   values only; structural CSS below should not need to change.
--------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  --color-bg: #ffffff;
  --color-fg: #1a1a1a;
  --color-muted: #5f5f5f;
  --color-accent: #c0334d;      /* placeholder "stripy" red */
  --color-surface: #f4f4f4;
  --color-border: #e0e0e0;

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

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;

  --measure: 65ch;
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #131313;
    --color-fg: #ececec;
    --color-muted: #9f9f9f;
    --color-accent: #e26377;
    --color-surface: #1e1e1e;
    --color-border: #2e2e2e;
  }
}

/* --------------------------------------------------------------------------
   Base
-------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
}

h1 { font-size: var(--text-2xl); line-height: 1.15; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

a {
  color: var(--color-accent);

  &:hover {
    text-decoration-thickness: 2px;
  }
}

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Chrome
-------------------------------------------------------------------------- */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);

  & .site-name {
    font-weight: 700;
    color: var(--color-fg);
    text-decoration: none;
  }

  & nav ul {
    display: flex;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

main {
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--space-4);
}

.site-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Work grid + cards (container-query ready)
-------------------------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-4);
}

.card {
  container-type: inline-size;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);

  & h3 {
    margin-block: var(--space-2) var(--space-1);

    & a {
      color: var(--color-fg);
      text-decoration: none;
    }
  }

  & .card-summary {
    color: var(--color-muted);
    font-size: var(--text-sm);
    margin: 0;
  }
}

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  margin-inline-end: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Prose
-------------------------------------------------------------------------- */
.page, .intro, .project {
  max-width: var(--measure);
}

.project-summary {
  font-size: var(--text-lg);
}

.project-client {
  color: var(--color-muted);
}

/* Motion (View Transitions, scroll-driven reveals) arrives in Phase 7,
   gated behind prefers-reduced-motion: no-preference. */