/* ============================================================
   Holdpoint — Foundations: Color + Type
   Governed AI infrastructure for financial services.
   Serious, typographic, restrained. Purple is the only accent.
   ============================================================ */

/* Fonts are loaded from Google Fonts (no local font files bundled yet).
   See README.md > VISUAL FOUNDATIONS for the substitution note.
   Space Grotesk = headings/wordmark. Inter = body + UI. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ---- Type families ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;  /* headings, wordmark, eyebrows */
  --font-body:    'Inter', system-ui, sans-serif;          /* body copy, UI, forms */

  /* ============================================================
     BASE COLOR TOKENS
     ============================================================ */
  /* Surfaces */
  --bg:        #f5f5f5;   /* page background — light grey-white */
  --surface:   #ffffff;   /* placeholder boxes, form fields, any raised plane */
  --surface-2: #ececec;   /* subtle inset / empty placeholder fill */

  /* Foreground / text */
  --fg1: #111111;   /* primary — near-black, headings + body */
  --fg2: #54585f;   /* secondary — subheadings, supporting prose */
  --fg3: #8a8d94;   /* tertiary — captions, meta, disabled */

  /* Accent — ORCHID PURPLE. The only accent colour in the system.
     Used for: eyebrow labels, the CTA button, focus rings. Nothing else. */
  --accent:        #E05F31;
  --accent-hover:  #C75028;   /* hover — slightly deeper */
  --accent-press:  #A8411F;   /* active/press — deepest */
  --accent-tint:   rgba(224, 95, 49, 0.06);  /* faint navy wash, rare */

  /* Lines */
  --hairline:        rgba(17, 17, 17, 0.12);  /* plain hairline rules between sections */
  --hairline-strong: rgba(17, 17, 17, 0.22);  /* field borders, stronger dividers */

  /* Focus */
  --focus-ring: rgba(224, 95, 49, 0.35);

  /* ============================================================
     TYPE SCALE (base tokens)
     Space Grotesk runs tight; Inter runs comfortable.
     ============================================================ */
  --text-eyebrow: 0.8125rem;  /* 13px — uppercase tracked label */
  --text-sm:      0.875rem;   /* 14px */
  --text-base:    1.0625rem;  /* 17px — default body */
  --text-lg:      1.25rem;    /* 20px — hero subheading, lead-in prose */
  --text-xl:      1.5rem;     /* 24px — h3 */
  --text-2xl:     2.5rem;     /* 40px — h2 section heading */
  --text-3xl:     4rem;       /* 64px — h1 / hero */

  --tracking-eyebrow: 0.14em;
  --tracking-tight:  -0.02em;  /* large display headings */
  --tracking-snug:   -0.01em;

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-body:  1.6;
  --leading-prose: 1.65;

  /* ============================================================
     SPACING (4px base) — generous, infrastructure-grade rhythm
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 140px;   /* section vertical padding */

  /* Layout — wide margins, NOT a tight centred column */
  --page-max: 1600px;   /* outer content frame */
  --gutter:   clamp(32px, 5vw, 80px);  /* wide horizontal margins (Palantir reference) */

  /* Radii — minimal. Square-ish, never pill, never soft. */
  --radius-sm: 2px;
  --radius:    4px;   /* buttons, fields, placeholder box */

  /* The system is intentionally flat: no drop shadows on content.
     A single hairline does the work a shadow would. */
  --shadow-none: none;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply these classes (or mirror them) when composing pages.
   ============================================================ */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0;
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
  margin: 0;
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
  margin: 0;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-prose);
  color: var(--fg2);
  margin: 0;
}

.p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--fg1);
  margin: 0;
}

.p-muted {
  color: var(--fg2);
}

.small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg3);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg1);
}

/* ---- Button: the single accent action ---- */
.btn-accent {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  padding: 14px 28px;
  cursor: pointer;
  transition: background 140ms ease;
}
.btn-accent:hover  { background: var(--accent-hover); }
.btn-accent:active { background: var(--accent-press); }
.btn-accent:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ---- Hairline rule (no dot markers, ever) ---- */
.rule {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 0;
}