/* ============================================================
   LexPars — Colors & Type
   Source of truth for the brand's foundational tokens.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Faculty+Glyphic&family=Public+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ── Core neutrals ──────────────────────────────────────── */
  --black:        #0a0b0a;   /* hero, contact, footer background */
  --off-white:    #f7f6f4;   /* default page background */
  --light-gray:   #eeede9;   /* subtle surface */
  --surface-gray: #f5f5f5;   /* services section background */
  --mid-gray:     #8a8a85;   /* muted text, dividers */
  --border:       #d8d7d2;   /* hairline borders on light surfaces */
  --white:        #ffffff;

  /* ── Brand accent ───────────────────────────────────────── */
  /* Deep forest green — the primary brand color, used for body
     copy on light surfaces and for the numbered service badge. */
  --forest:       #283836;
  --forest-12:    rgba(40, 56, 54, 0.12);   /* tinted label bg */
  --forest-20:    rgba(40, 56, 54, 0.20);   /* hairline ring */
  --forest-50:    rgba(40, 56, 54, 0.50);   /* secondary copy */

  /* ── Foreground (semantic) ──────────────────────────────── */
  --fg-1:         var(--forest);            /* primary on light */
  --fg-2:         var(--forest-50);         /* secondary on light */
  --fg-on-dark-1: #ffffff;                  /* primary on dark */
  --fg-on-dark-2: rgba(255, 255, 255, 0.50);/* secondary on dark */
  --fg-on-dark-3: rgba(255, 255, 255, 0.35);/* tertiary on dark */

  /* ── Glass / overlays ───────────────────────────────────── */
  --glass-light:    rgba(255, 255, 255, 0.12);
  --glass-light-hi: rgba(255, 255, 255, 0.20);
  --glass-dark:     rgba(40, 56, 54, 0.12);
  --backdrop-blur:  12px;   /* Figma source: 12px (NOT 6px as in marketing CSS) */

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: 'Faculty Glyphic', Georgia, serif;        /* About + Contact headings only (36px) */
  --font-body:    'Public Sans', system-ui, -apple-system, sans-serif; /* Body, eyebrows, controls */
  --font-hero:    'Inter', system-ui, -apple-system, sans-serif;       /* Hero copy only (24/28) */

  /* Display scale (Faculty Glyphic) — About + Contact headings */
  --type-display-xl: 400 36px/1.15 var(--font-display);
  --type-display-lg: 400 28px/1.15 var(--font-display);
  /* Hero copy — Inter (NOT Faculty Glyphic) at 24/28 */
  --type-hero:       400 24px/28px var(--font-hero);

  /* Body scale (Public Sans) */
  --type-body-lg:    400 18px/22px var(--font-body);
  --type-body:       400 16px/20px var(--font-body);
  --type-body-sm:    400 14px/18px var(--font-body);
  --type-mono-num:   600 10px/1   var(--font-body);

  /* Eyebrow / pill / CTA labels */
  --type-eyebrow: 600 12px/1 var(--font-body);
  --eyebrow-tracking: 0.6px;
  --pill-tracking:    0.72px;

  /* ── Geometry ───────────────────────────────────────────── */
  --radius-pill: 999px;
  --radius-sm:   4px;        /* pill buttons, section labels */
  --radius-md:   10px;        /* form fields, submit button */
  --radius-lg:   12px;        /* service cards */

  /* ── Shadows / elevation ────────────────────────────────── */
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.02);    /* very subtle — borders carry weight */
  --shadow-pop:  0 8px 24px rgba(10, 11, 10, 0.08);

  /* ── Spacing scale (multiples of 4) ─────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  28px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  60px;
  --space-10: 80px;
  --space-11: 120px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    0.2s;
  --dur-med:     0.4s;
  --dur-slow:    0.9s;
}

/* ============================================================
   Semantic element styles — drop colors_and_type.css into any
   prototype and these defaults light up automatically.
   ============================================================ */

html, body {
  background: var(--off-white);
  color: var(--fg-1);
  font: var(--type-body-lg);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font: var(--type-display-xl);
  color: var(--fg-1);
  text-wrap: pretty;
  letter-spacing: -0.005em;
}
h2, .h2 {
  font: var(--type-display-lg);
  color: var(--fg-1);
  text-wrap: pretty;
}
h3, .h3 {
  font: 400 22px/20px var(--font-body);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

p, .p {
  font: var(--type-body-lg);
  color: var(--fg-1);
  text-wrap: pretty;
}

.eyebrow,
.section-label {
  font: var(--type-eyebrow);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--fg-1);
}

a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

code, .mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
}