/* Bernard Building — "The Crafted Line" brand tokens (client package, 2026-08-04) */

:root {
  /* Palette */
  --obsidian: #090D0E;   /* hero, footer, major dark sections */
  --carbon: #111617;     /* header, elevated dark surfaces */
  --graphite: #1B2122;   /* cards, dividers, hover states on dark */
  --warm-white: #F6F2EB; /* main light ground, text on dark */
  --parchment: #E6DED2;  /* alternate light sections */
  --bronze: #C79552;     /* primary CTA, active states, small accents only */
  --bronze-deep: #835A24;/* accessible bronze text on light */
  --timber: #6B432A;     /* rare material accent */
  --steel: #90999B;      /* muted copy on dark */
  --slate: #5A6162;      /* muted copy on light */

  /* Hairlines: thin borders instead of shadows */
  --line-on-dark: rgba(246, 242, 235, 0.14);
  --line-on-light: rgba(9, 13, 14, 0.16);
  --rule-bronze: rgba(199, 149, 82, 0.55);      /* measured rule beside an eyebrow */
  --ghost-on-dark: rgba(246, 242, 235, 0.22);   /* outlined display word behind content */

  /* Review rail edges fade rather than cut */
  --rail-mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);

  /* Hero scrim: legibility over the photograph, not decoration */
  --hero-scrim: linear-gradient(100deg, rgba(9, 13, 14, 0.96) 0%, rgba(9, 13, 14, 0.9) 34%, rgba(9, 13, 14, 0.52) 68%, rgba(9, 13, 14, 0.74) 100%);

  /* Type */
  --font-display: "Archivo", "Arial Black", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;

  --fs-hero: clamp(3.4rem, 6.3vw, 6.5rem);
  --fs-h2: clamp(2.25rem, 4.2vw, 4.5rem);
  --fs-h3: clamp(1.35rem, 2vw, 1.75rem);
  --fs-stat: clamp(2.75rem, 4.5vw, 4.25rem);
  --fs-body: 1.0625rem;   /* 17px */
  --fs-small: 0.9375rem;  /* 15px */
  --fs-eyebrow: 0.8125rem;/* 13px */
  --fs-button: 0.875rem;  /* 14px */

  /* Spacing scale: 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;

  /* Layout */
  --content-max: 1360px;
  --gutter: clamp(20px, 4vw, 64px);
  --section-y: clamp(64px, 10vw, 144px);  /* 56–72 mobile → 112–144 desktop */
  --radius: 2px;                          /* square geometry, 0–4px */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
}