/*
 * The shared web-UI layer: the foundation every app stands on, and the component vocabulary
 * more than one app renders. Apps import this first and add their own layout on top.
 *
 * The three layers below fix the cascade once, here, for every stylesheet in the repo
 * (capabilities/styles-follow-ownership, cascade-order-guarantee):
 *
 *   foundation  — the token baseline, the reset, base elements, the focus ring
 *   vocabulary  — the ds-* components shared across apps
 *   app         — one app's own layout, and the shell's own chrome
 *
 * A later layer beats an earlier one whatever the specificity or the import order, so an app
 * can retune a component without reaching for specificity and without depending on where its
 * stylesheet happens to sit in an entrypoint's import list.
 *
 * Every stylesheet in src/ opens by declaring which layer it is in. An unlayered rule outranks
 * every layered one, so a sheet that forgets does not merely land in the wrong place — it wins
 * everything, silently.
 */
@layer foundation, vocabulary, app;

@layer foundation {
  /*
   * Every themeable surface reads its color from a CSS custom property: var(--<token>). The
   * `:root` block seeds the monochromatic baseline (kept in sync with
   * webshell/protocol/tokens.ts MONOCHROME_THEME); the shell's paintTokens() writes a brand's
   * values as inline custom properties on the document root, overriding that baseline. So first
   * paint is always styled — no unstyled flash — and a token a brand omits keeps its :root
   * baseline value rather than resolving to nothing.
   */
  :root {
    --bg: #fafafa;
    --surface: #ffffff;
    --text: #1a1a1a;
    --muted: #5c5c5c;
    --accent: #3a3a3a;
    --accent-contrast: #ffffff;
    --border: #e2e2e2;
    --danger: #cf222e;

    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Responsive contract — framework-owned, NOT brand-themeable (resolved by
       initial-ds-components/responsive-contract). Spacing is the fixed --step scale, used
       as calc(var(--step) * n); components lay out mobile-first (single column) and
       enhance to multi-column at --bp-content. CSS can't read a custom property inside a
       media query, so --bp-content documents the value the @media rules hardcode. */
    --step: 8px;
    --radius: 8px;
    --bp-content: 40rem;

    /* Touch target floor — nothing goes under this one. */
    --tap: 44px;
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

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

  /* Keyboard focus is part of the contract — always visible, drawn in the live accent. */
  :where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
  }
}

@layer vocabulary {
  /* ---- Type scale -------------------------------------------------------- */

  .ds-head {
    display: flex;
    flex-direction: column;
    gap: var(--step);
  }

  .ds-eyebrow {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
  }

  .ds-title {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .ds-lede {
    margin: 0;
    max-width: 62ch;
    color: var(--muted);
  }

  .ds-section {
    display: flex;
    flex-direction: column;
    gap: calc(var(--step) * 2);
  }

  .ds-section-title {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: var(--step);
    border-bottom: 1px solid var(--border);
  }

  .ds-muted {
    color: var(--muted);
    font-size: 0.875rem;
  }

  .ds-rule {
    height: 1px;
    background: var(--border);
    border: none;
    margin: 0;
  }

  .ds-link {
    color: var(--accent);
  }

  /* ---- Buttons ----------------------------------------------------------- */

  .ds-btn {
    font: inherit;
    font-size: 0.875rem;
    padding: calc(var(--step)) calc(var(--step) * 1.75);
    min-height: var(--tap);
    border-radius: var(--radius);
    border: 1px solid var(--accent);
    cursor: pointer;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
  }

  .ds-btn--solid {
    background: var(--accent);
    color: var(--accent-contrast);
  }

  .ds-btn--ghost {
    background: transparent;
    color: var(--accent);
  }

  .ds-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  /* ---- List, card, form -------------------------------------------------- */
  /*
   * Each surface reads an APPLICATION token that falls back to its component-declared
   * SEMANTIC default: var(--<app>, var(--<semantic>)). A brand paints --<app> to retune
   * one surface; unset, it resolves from the palette alone. Keep these fallbacks in sync
   * with webshell/protocol/app-tokens.ts APPLICATION_TOKENS (the source of truth for the
   * mapping).
   */

  /* List — rows on a raised surface, separated by dividers. */
  .ds-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--list-bg, var(--surface));
    border: 1px solid var(--list-divider, var(--border));
    border-radius: var(--radius);
    overflow: hidden;
  }

  .ds-list-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--step);
    padding: calc(var(--step) * 1.5) calc(var(--step) * 2);
    border-top: 1px solid var(--list-divider, var(--border));
  }

  .ds-list-item:first-child {
    border-top: none;
  }

  .ds-list-item-title {
    color: var(--list-text, var(--text));
    font-size: 0.9375rem;
  }

  .ds-list-item-meta {
    color: var(--list-muted, var(--muted));
    font-family: var(--mono);
    font-size: 0.75rem;
    flex: none;
  }

  /* Card — a titled panel bounded by a hairline. */
  .ds-card {
    display: flex;
    flex-direction: column;
    gap: var(--step);
    padding: calc(var(--step) * 2);
    background: var(--card-bg, var(--surface));
    border: 1px solid var(--card-border, var(--border));
    border-radius: var(--radius);
  }

  .ds-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--card-title, var(--text));
  }

  .ds-card-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--card-text, var(--muted));
  }

  /* Form — labelled fields with bordered inputs. Mobile-first: fields stack; the field
     row can go two-up at the content breakpoint. */
  .ds-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--step) * 1.5);
  }

  .ds-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--step) * 0.75);
  }

  .ds-field-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--field-label, var(--text));
  }

  /* Mobile-first, and 16px is not a taste choice: iOS Safari zooms the viewport onto any field
     it focuses whose text is smaller, and never zooms back out. The 0.875rem the rest of the
     type scale uses is restored at the content breakpoint, where no browser does this. */
  .ds-input {
    font: inherit;
    font-size: max(1rem, 16px);
    padding: calc(var(--step)) calc(var(--step) * 1.25);
    background: var(--input-bg, var(--surface));
    border: 1px solid var(--input-border, var(--border));
    border-radius: var(--radius);
    color: var(--input-text, var(--text));
  }

  .ds-input::placeholder {
    color: var(--input-placeholder, var(--muted));
  }

  .ds-input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

  @media (min-width: 40rem) {
    .ds-form {
      grid-template-columns: repeat(2, 1fr);
    }

    .ds-input {
      font-size: 0.875rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
}

/*
 * This page's own layer, and nothing else. The visual world is inherited unchanged from
 * `src/frontend/ds.css` — the monochrome baseline, the 8px --step scale, hairline borders, no
 * shadow anywhere. `build.ts` emits that foundation ahead of this file, so the cascade it
 * declares — foundation, vocabulary, app — is the one that applies here.
 *
 * `@layer app`, per capabilities/styles-follow-ownership: this is one surface's layout, and an
 * unlayered rule would outrank every layered one in the sheet above it.
 */
@layer app {
  .dev-page-header {
    max-width: 60rem;
    margin: 0 auto;
    padding: calc(var(--step) * 5) calc(var(--step) * 3) 0;
  }

  @media (min-width: 40rem) {
    .dev-page-header {
      padding: calc(var(--step) * 10) calc(var(--step) * 6) 0;
    }
  }

  .dev-page-header h1 {
    margin: 0;
    max-width: 20ch;
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .dev-page {
    max-width: 60rem;
    margin: 0 auto;
    padding: calc(var(--step) * 5) calc(var(--step) * 3) calc(var(--step) * 12);
    display: flex;
    flex-direction: column;
    gap: calc(var(--step) * 6);
  }

  @media (min-width: 40rem) {
    .dev-page {
      padding: calc(var(--step) * 10) calc(var(--step) * 6) calc(var(--step) * 16);
    }
  }

  section h2 {
    margin: 0 0 calc(var(--step) * 2);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  section p,
  section li {
    margin: 0 0 calc(var(--step) * 2);
    max-width: 68ch;
    line-height: 1.5;
  }

  section p.quote {
    font-size: 1.125rem;
    color: var(--text);
  }

  section p strong,
  section li strong {
    font-weight: 600;
  }

  section code {
    font-family: var(--mono);
    font-size: 0.875em;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 0.3em;
  }

  section ul {
    margin: 0 0 calc(var(--step) * 2);
    padding-left: 1.25em;
  }

  section table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 calc(var(--step) * 3);
    font-size: 0.9375rem;
  }

  section th,
  section td {
    text-align: left;
    vertical-align: top;
    padding: calc(var(--step) / 2) var(--step);
    border-bottom: 1px solid var(--border);
  }

  section th {
    color: var(--muted);
    font-weight: 600;
  }
}