/* Paint for FreshNetwork shapes under the fc-neon skin. Shapes stay structural;
 * everything visual here reads Intershapes skin tokens, so another skin's
 * tokens repaint the app without touching a shape. */

[data-skin] *, [data-skin] *::before, [data-skin] *::after { box-sizing: border-box; }
html[data-skin] body { margin: 0; font-size: 1rem; line-height: 1.5; }

/* Visible focus everywhere (WCAG 2.4.7 / 2.4.13) */
[data-skin] :focus-visible { outline: 3px solid var(--color-accent-default); outline-offset: 2px; }
[data-skin] main:focus { outline: none; }

[data-skin] [data-role="vh"] {
  position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
[data-skin] [data-role="skip-link"]:focus {
  background: var(--color-accent-default); color: var(--color-text-inverse); padding: 0.5rem 1rem;
}

/* Buttons. The skin paints submit buttons; give the rest the same base. */
[data-skin] button {
  font: inherit; cursor: pointer; padding: 0.4rem 0.9rem; border: 1px solid transparent;
  border-radius: var(--layout-button-border-radius); font-weight: 600;
  background: var(--color-accent-default); color: var(--color-text-inverse);
}
[data-skin] button[data-variant="quiet"] {
  background: transparent !important; color: var(--color-text-secondary) !important;
  padding: 0.125rem 0; font-weight: 500; text-decoration: underline; text-underline-offset: 0.15em;
}
[data-skin] button[data-variant="quiet"]:hover { color: var(--color-text-primary) !important; }
[data-skin] button[data-variant="danger"] { background: #ff8a7a !important; color: var(--color-text-inverse) !important; }
[data-skin] button[aria-busy="true"], [data-skin] button:disabled { opacity: 0.7; cursor: progress; }

[data-skin] a { color: var(--color-text-accent); }
[data-skin] label { font-weight: 600; }
[data-skin] code, [data-skin] pre { font-family: var(--type-eyebrow-family); font-size: 0.875em; }
[data-skin] pre { background: var(--color-surface-tertiary); padding: 0.75rem; border-radius: var(--layout-card-border-radius); }
[data-skin] blockquote { margin: 0; padding-inline-start: 0.75rem; border-inline-start: 3px solid var(--color-border-default); }
[data-skin] [data-role="hint"] { color: var(--color-text-secondary) !important; }
[data-skin] [data-role="error"] { color: #ffb4a8 !important; font-weight: 600; }
[data-skin] [role="status"]:not([hidden]) { color: var(--color-text-accent); }
[data-skin] [data-role="badge"] {
  font-family: var(--type-eyebrow-family); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.125rem 0.375rem; border: 1px solid var(--color-border-accent); color: var(--color-text-accent);
  border-radius: var(--layout-button-border-radius);
}

/* App shell */
[data-skin] [data-shape="app-shell"] [data-region="banner"] {
  border-block-end: 1px solid var(--color-border-default); background: var(--color-surface-default);
}
[data-skin] [data-shape="app-shell"] [data-role="brand"] {
  font-family: var(--type-eyebrow-family); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--color-text-accent); text-decoration: none; font-weight: 700;
}
[data-skin] [data-shape="app-shell"] [data-region="sidebar"] {
  background: var(--color-surface-secondary); border-inline-end: 1px solid var(--color-border-default);
}
[data-skin] [data-shape="app-shell"] [data-region="sidebar"] h2 {
  font-family: var(--type-eyebrow-family) !important; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-secondary) !important;
}
[data-skin] [data-shape="app-shell"] [data-region="sidebar"] a {
  color: var(--color-text-primary); text-decoration: none; border-radius: var(--layout-button-border-radius);
}
[data-skin] [data-shape="app-shell"] [data-region="sidebar"] a:hover { background: var(--color-surface-tertiary); }
[data-skin] [data-shape="app-shell"] [data-region="sidebar"] a[aria-current="page"] {
  background: var(--color-accent-subtle); color: var(--color-text-accent); font-weight: 600;
}
@media (max-width: 48rem) {
  [data-skin] [data-shape="app-shell"] [data-region="sidebar"] { border-inline-end: 0; border-block-end: 1px solid var(--color-border-default); }
}

/* Messages */
[data-skin] [data-shape="message"] { border-block-end: 1px solid var(--color-border-muted); }
[data-skin] [data-shape="message"] [data-role="avatar"] {
  background: var(--color-surface-tertiary); color: var(--color-text-primary);
  border-radius: 50%; font-family: var(--type-eyebrow-family);
}
[data-skin] [data-shape="message"] [data-role="permalink"],
[data-skin] [data-shape="message"] [data-role="edited"],
[data-skin] [data-shape="message"] [data-role="deleted"] { color: var(--color-text-secondary) !important; font-size: 0.8125rem; text-decoration: none; }
[data-skin] [data-shape="message"] [data-role="body"] p { color: var(--color-text-primary) !important; }
[data-skin] [data-shape="message"] [data-role="actions"] { font-size: 0.8125rem; }
[data-skin] [data-shape="message"] [data-role="actions"] a { color: var(--color-text-secondary); }
[data-skin] [data-shape="message"] [data-role="actions"] a:hover { color: var(--color-text-primary); }
[data-skin] [data-shape="message"][data-kind="ai_challenge"] {
  border-inline-start: 3px solid var(--color-accent-default); padding-inline-start: 0.75rem;
  background: var(--color-surface-secondary);
}
[data-skin] [data-shape="message"].is-new { animation: fn-arrive var(--motion-duration-slow) var(--motion-easing-default); }
@keyframes fn-arrive { from { background: var(--color-accent-subtle); } }
@media (prefers-reduced-motion: reduce) { [data-skin] [data-shape="message"].is-new { animation: none; } }

[data-skin] [data-shape="message-feed"] { flex: 1; }
[data-skin] [data-shape="challenge-draft"],
[data-skin] [data-shape="dropzone"] {
  background: var(--color-surface-secondary); border: 1px solid var(--color-border-accent);
  border-radius: var(--layout-card-border-radius);
}
[data-skin] [data-shape="dropzone"] { border-style: dashed; }
[data-skin] [data-shape="dropzone"].is-dragover { background: var(--color-accent-subtle); border-color: var(--color-accent-default); }
[data-skin] [data-shape="document-table"] th,
[data-skin] [data-shape="document-table"] td { border-block-end: 1px solid var(--color-border-muted); }
[data-skin] [data-shape="composer"] { border-block-start: 1px solid var(--color-border-default); }

[data-skin] dialog[data-shape="confirm-dialog"] {
  background: var(--color-surface-secondary); color: var(--color-text-primary);
  border: 1px solid var(--color-border-default); border-radius: var(--layout-card-border-radius);
  padding: 1.25rem; max-inline-size: min(28rem, calc(100vw - 2rem));
}
[data-skin] dialog[data-shape="confirm-dialog"]::backdrop { background: rgba(0, 0, 0, 0.6); }