/* main.css — Crestmark design tokens + base reset
 * Owns: design tokens, box-model reset, body defaults, typography scale
 */

:root {
  /* Palette (Crestmark) */
  --color-bg-page:        #FFFFFF;
  --color-bg-dark:        #0D0D0D;
  --color-bg-dark-40:     rgba(13, 13, 13, 0.40);
  --color-surface-warm:   #F8F7F5;
  --color-surface-warm-2: #FAF9F5;
  --color-surface-card:   #FFFFFF;
  --color-ink-primary:    #1A1A1A;
  --color-ink-body:       #0D0D0D;
  --color-ink-muted:      #636363;
  --color-ink-white:      #FFFFFF;
  --color-accent-dark:    #1A1A1A;
  --color-accent-red:     #C2001D;
  --color-border:         #ECEAE6;
  --color-success:        #1B873F;
  --color-danger:         #C2001D;

  /* Brand primary — overridable by user brand settings at runtime */
  --brand-primary:        #1A1A1A;

  /* Typography */
  --font-primary: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-hero:    58px;
  --fs-h2:      32px;
  --fs-stat:    56px;
  --fs-h3:      28px;
  --fs-title:   20px;
  --fs-body:    16px;
  --fs-sm:      14px;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 40px;
  --space-10: 60px;

  /* Radii */
  --radius-pill: 30px;
  --radius-card: 8px;
  --radius-input: 4px;
  --radius-round: 50%;

  /* Layout */
  --sidebar-w: 248px;
  --container-max: 1200px;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--color-ink-primary);
  background-color: var(--color-surface-warm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { font-weight: 500; line-height: 1.2; letter-spacing: -0.5px; }
h2 { font-size: var(--fs-h2); }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::placeholder { color: var(--color-ink-muted); opacity: 1; }

/* Utility */
.muted { color: var(--color-ink-muted); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-ink-muted);
  font-size: var(--fs-body);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}