/* The studio site's shared base: faces, tokens, text, controls. Neutral on purpose (D-36): no studio
   name or mark until the studio's own brand exists, and a quiet frame so a client's concepts carry the
   colour. Page-specific rules live in intake.css, viewer.css and admin.css. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --face-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --face-display: "Bricolage Grotesque", "Hanken Grotesk", Arial, sans-serif;

  /* A cool, slightly warm-free paper so any concept's palette reads true beside it. */
  --ground: #f3f3f1;
  --surface: #ffffff;
  --ink: #17181c;
  --ink-2: #4a4c55;        /* secondary text, 8.2:1 on --ground */
  --ink-3: #6b6d76;        /* hints, 4.9:1 on --ground */
  --line: #d9d9d5;
  --line-strong: #b9bab4;
  --action: #17181c;       /* primary buttons are ink */
  --action-ink: #ffffff;
  --focus: #2b59d9;
  --good: #1d6b3f;
  --bad: #a4262c;
  --wash-good: #e5f1ea;
  --wash-bad: #f7e6e6;

  /* The neutral frame round a client's own design (D-24): its ground and border, never a brand colour,
     whatever look the chrome around it takes. */
  --frame-ground: #ffffff;
  --frame-line: #d9d9d5;

  --radius: 10px;
  --radius-small: 6px;
  --shadow: 0 1px 2px rgba(23, 24, 28, 0.06), 0 8px 24px rgba(23, 24, 28, 0.08);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  --step-4: clamp(2rem, 1.5rem + 2.4vw, 3.1rem);

  color-scheme: light;
  accent-color: var(--ink);
  caret-color: var(--focus);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-strong) transparent; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-body);
  font-size: var(--step-0);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

::selection { background: #cdd9fb; color: var(--ink); }

h1, h2, h3 {
  font-family: var(--face-display);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); margin-top: var(--space-7); }
h3 { font-size: var(--step-2); margin-top: var(--space-6); }
p { margin: 0 0 var(--space-4); max-width: 68ch; text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.wrap { width: min(100% - 2 * var(--space-5), 1120px); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--space-5), 720px); margin-inline: auto; }
.muted { color: var(--ink-2); }
.hint { color: var(--ink-3); font-size: var(--step--1); }
/* The studio bar, only in the markup while STUDIO_BRANDING is on: the studio's name (set in its display
   face by brand.css) and, on a client link, the project name in the secondary text colour, so the page's
   own heading still leads. */
.studio-bar { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); color: var(--ink-2); font-size: var(--step--1); }
.studio-project { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Controls */
label { display: block; font-weight: 600; margin-bottom: var(--space-2); }

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  padding: 11px 13px;
  min-height: 46px;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad); }

.choice { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 450; margin: 0 0 var(--space-2); cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-weight: 600; line-height: 1;
  min-height: 46px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--action);
  background: var(--action); color: var(--action-ink);
  cursor: pointer; text-decoration: none;
  transition: background-color 120ms ease-out, color 120ms ease-out, transform 120ms ease-out;
}
.button:hover { background: #2d2f36; }
.button:active { transform: translateY(1px); }
.button.secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button.secondary:hover { border-color: var(--ink); background: var(--surface); }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.button[aria-busy="true"] { cursor: progress; opacity: 0.7; }

.status { border-radius: var(--radius-small); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }
.status.good { background: var(--wash-good); color: var(--good); }
.status.bad { background: var(--wash-bad); color: var(--bad); }
.status:empty { display: none; }

main.plain { width: min(100% - 2 * var(--space-5), 640px); margin: var(--space-8) auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}