/* Pincushion design system. Home-page identity; docs/brand-guidelines.md is the contract.
 * Tokens are safe to load alone. Base rules opt in through data-pc-surface.
 * Never apply this stylesheet inside a reviewed third-party page or screenshot. */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/nunito-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/space-grotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/space-mono-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/space-mono-bold-latin.woff2') format('woff2'); }
:root {
  --pc-color-accent: #e84430;
  --pc-color-action: #c93a28;
  --pc-color-action-hover: #ae3022;
  --pc-color-navy: #1a2744;
  --pc-color-ink: #0a0a0a;
  --pc-color-paper: #fafafa;
  --pc-color-surface: #ffffff;
  --pc-color-soft: #fff0ed;
  --pc-color-line: #e5e5e5;
  --pc-color-muted: #525252;
  --pc-color-subtle: #737373;
  --pc-color-ai: #7c3aed;
  --pc-color-ai-soft: #f5f0ff;
  --pc-color-success: #1f7a4a;
  --pc-color-success-soft: #e9f7ef;
  --pc-color-warning: #8a5700;
  --pc-color-warning-soft: #fff7db;
  --pc-color-danger: #b42318;
  --pc-color-danger-soft: #fdeae7;
  /* One treatment for every code surface: navy, never pure black or light gray. */
  --pc-code-bg: #1a2744;
  --pc-code-fg: #f5f7fb;
  --pc-code-muted: #a8b3c7;
  --pc-font-heading: 'Nunito', -apple-system, sans-serif;
  --pc-font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pc-font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pc-space-1: 4px;
  --pc-space-2: 8px;
  --pc-space-3: 12px;
  --pc-space-4: 16px;
  --pc-space-6: 24px;
  --pc-space-8: 32px;
  --pc-space-12: 48px;
  --pc-space-16: 64px;
  --pc-space-24: 96px;
  --pc-radius-control: 10px;
  --pc-radius-card: 16px;
  --pc-radius-feature: 24px;
  --pc-radius-pill: 999px;
  --pc-shadow-card: 0 8px 28px rgba(26, 39, 68, .06);
  --pc-shadow-raised: 0 20px 56px rgba(26, 39, 68, .12);
  --pc-motion-fast: 160ms;
  --pc-motion-enter: 280ms;
  --pc-ease: cubic-bezier(.16, 1, .3, 1);
}

/* The home retains its established display scale and animation. Working surfaces
 * share its typography without inheriting a marketing hero's dimensions. */
html[data-pc-surface]:not([data-pc-surface="home"]) body {
  font-family: var(--pc-font-body);
}
html[data-pc-surface]:not([data-pc-surface="home"]) :is(h1, h2, h3, h4) {
  font-family: var(--pc-font-heading);
  font-weight: 800;
  color: var(--pc-color-navy);
}
html[data-pc-surface] :is(.brand, .nav-logo, .footer-logo, .pc-header strong) {
  font-family: var(--pc-font-heading);
  font-weight: 800;
  color: var(--pc-color-navy);
}
html[data-pc-surface] :is(button, input, textarea, select) { font-family: var(--pc-font-body); }
html[data-pc-surface] :is(code, pre, .mono, .connect-snippet) { font-family: var(--pc-font-mono); }
html[data-pc-surface] :focus-visible { outline: 3px solid var(--pc-color-accent); outline-offset: 3px; }
html[data-pc-surface] :is(.brand, .nav-logo, .footer-logo, .pc-header) img[src$="logo-icon.png"] { object-fit: contain; }
html[data-pc-surface="utility"] body { background: var(--pc-color-paper); color: var(--pc-color-ink); }
html[data-pc-surface="host"] :is(h1, h2, h3, h4, .brand) { color: inherit; }
html[data-pc-surface="content"] main :is(code, a) { overflow-wrap: anywhere; }
html[data-pc-surface="content"] main pre code { overflow-wrap: normal; }
@media (max-width: 600px) {
  html[data-pc-surface="content"] main table { table-layout: fixed; width: 100%; }
  html[data-pc-surface="content"] main :is(th, td) { overflow-wrap: anywhere; padding: 12px 8px; }
}

/* Home-derived branding behind focused authentication cards. */
html[data-pc-surface] .pcds-auth-background {
  position: relative; isolation: isolate;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--pc-color-accent) 14%, transparent), transparent),
    radial-gradient(ellipse 60% 40% at 80% 80%, color-mix(in srgb, var(--pc-color-accent) 6%, transparent), transparent),
    var(--pc-color-paper);
}
.pcds-auth-background::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--pc-color-navy) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--pc-color-navy) 4%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent);
}

/* Shared site header for marketing, docs, guide, and crit pages.
 * The logo PNG carries transparent padding; the negative margins crop it to the tomato. */
.pc-site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--pc-color-paper) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pc-color-line);
  font-family: var(--pc-font-body);
}
.pc-site-header__inner {
  max-width: 1200px; min-height: 64px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.pc-site-header__brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--pc-color-navy); text-decoration: none;
  font: 800 20px/1 var(--pc-font-heading); letter-spacing: -.02em;
}
.pc-site-header__brand:hover { text-decoration: none; }
.pc-site-header__brand img { display: block; height: 60px; width: auto; max-width: none; margin: -11px -33px -13px -33px; }
.pc-site-header__nav { display: flex; align-items: center; gap: 4px; }
.pc-site-header__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: var(--pc-radius-control); color: var(--pc-color-muted);
  font: 500 14px/1 var(--pc-font-body); text-decoration: none; white-space: nowrap;
  transition: color var(--pc-motion-fast), background var(--pc-motion-fast);
}
.pc-site-header__nav a:hover { color: var(--pc-color-navy); text-decoration: none; }
.pc-site-header__nav a[aria-current="page"] { color: var(--pc-color-navy); font-weight: 600; }
.pc-site-header__nav a.pc-site-header__cta {
  margin-left: 8px; padding: 0 18px; border-radius: var(--pc-radius-pill);
  background: var(--pc-color-navy); color: #fff; font-weight: 600;
}
.pc-site-header__nav a.pc-site-header__cta:hover { background: #243456; color: #fff; }
@media (max-width: 820px) {
  .pc-site-header__inner { padding: 0 16px; gap: 12px; }
  .pc-site-header__nav [data-pc-nav="wide"] { display: none; }
}
@media (max-width: 380px) {
  .pc-site-header__brand { font-size: 18px; }
  .pc-site-header__nav a { padding: 0 8px; }
  .pc-site-header__nav a.pc-site-header__cta { margin-left: 4px; padding: 0 14px; }
}

/* Reusable specimens, used by /style-guide and available to new surfaces. */
.pcds-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 20px; border: 1px solid transparent;
  border-radius: var(--pc-radius-control); background: var(--pc-color-action); color: #fff;
  font: 600 14px/1.3 var(--pc-font-body); cursor: pointer; text-decoration: none;
  transition: background var(--pc-motion-fast), transform var(--pc-motion-fast), box-shadow var(--pc-motion-fast);
}
.pcds-button:hover { background: var(--pc-color-action-hover); transform: translateY(-1px); }
.pcds-button--navy { background: var(--pc-color-navy); }
.pcds-button--navy:hover { background: #243456; }
.pcds-button--secondary { background: #fff; border-color: var(--pc-color-line); color: var(--pc-color-navy); }
.pcds-button--secondary:hover { background: var(--pc-color-paper); border-color: var(--pc-color-navy); }
.pcds-button--pill { border-radius: var(--pc-radius-pill); }
.pcds-button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.pcds-card { border: 1px solid var(--pc-color-line); border-radius: var(--pc-radius-card); background: #fff; padding: 24px; box-shadow: var(--pc-shadow-card); }
.pcds-label { display: block; margin-bottom: 8px; color: var(--pc-color-navy); font: 600 14px/1.4 var(--pc-font-body); }
.pcds-field { width: 100%; min-height: 44px; border: 1px solid #d4d4d4; border-radius: var(--pc-radius-control); padding: 11px 14px; background: #fff; color: var(--pc-color-ink); font: 400 16px/1.4 var(--pc-font-body); }
.pcds-field[aria-invalid="true"] { border-color: var(--pc-color-danger); }
.pcds-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--pc-radius-pill); background: #f5f5f5; color: var(--pc-color-muted); font: 600 12px/1.4 var(--pc-font-body); }
.pcds-badge--ai { background: var(--pc-color-ai-soft); color: var(--pc-color-ai); }
.pcds-badge--success { background: var(--pc-color-success-soft); color: var(--pc-color-success); }
.pcds-badge--warning { background: var(--pc-color-warning-soft); color: var(--pc-color-warning); }
.pcds-badge--danger { background: var(--pc-color-danger-soft); color: var(--pc-color-danger); }
@media (prefers-reduced-motion: reduce) {
  html[data-pc-surface] { scroll-behavior: auto; }
  html[data-pc-surface] *, html[data-pc-surface] *::before, html[data-pc-surface] *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}