/* ============================================================
   Beautiful Alarms — Design Tokens
   Reverse-engineered from uploads/BA-Home-SS4.jpg
   Inspired by the restraint of ndstudio.gov
   ============================================================ */

/* -------- Webfonts ------------------------------------------- */
/* Apple Garamond Light — primary display + body serif (local TTF) */
/* Inter — uppercase nav + wordmark + eyebrow labels (Google CDN)  */
/* JetBrains Mono — system / technical text, used sparingly        */
@font-face {
  font-family: "Apple Garamond";
  src: url("fonts/AppleGaramond-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color (monochrome + one accent) -------------- */
  --ba-bg:           #000000;   /* pure black page */
  --ba-bg-inverse:   #F2EEE5;   /* bone white surface (rare) */
  --ba-surface-1:    #111113;   /* lifted, e.g. modal bg */
  --ba-surface-2:    #18181B;   /* card-ish, used very sparingly */

  --ba-fg:           #F2EEE5;   /* primary type — warm bone */
  --ba-fg-2:         rgba(242, 238, 229, 0.60);  /* secondary */
  --ba-fg-3:         rgba(242, 238, 229, 0.45);  /* tertiary / labels */
  --ba-fg-4:         rgba(242, 238, 229, 0.20);  /* hairline / disabled */

  --ba-fg-on-light:  #000000;   /* type on bone-white surface */

  --ba-accent:       #C8462C;   /* the "alarm" — emergencies only */
  --ba-accent-soft:  #8E3320;

  /* ---------- Type families -------------------------------- */
  --ba-font-serif:   "Apple Garamond", "ITC Garamond", "Adobe Garamond Pro",
                     "EB Garamond", ui-serif, Georgia, "Times New Roman", serif;
  --ba-font-sans:    "Inter", "Söhne", "ABC Diatype", -apple-system,
                     BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --ba-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono",
                     Menlo, Consolas, monospace;

  /* ---------- Type scale (px @ desktop, +30% over baseline) - */
  --ba-text-xs:    16px;
  --ba-text-sm:    18px;
  --ba-text-base:  21px;
  --ba-text-md:    26px;
  --ba-text-lg:    31px;
  --ba-text-xl:    42px;
  --ba-text-2xl:   52px;     /* body hero on homepage */
  --ba-text-3xl:   73px;
  --ba-text-4xl:   94px;
  --ba-text-5xl:   125px;

  /* ---------- Tracking ------------------------------------ */
  --ba-tracking-tight:  -0.01em;
  --ba-tracking-normal: 0;
  --ba-tracking-loose:  0.08em;
  --ba-tracking-xloose: 0.18em;   /* wordmark + eyebrow nav */

  /* ---------- Line heights -------------------------------- */
  --ba-leading-tight:  1.10;
  --ba-leading-snug:   1.20;
  --ba-leading-normal: 1.35;
  --ba-leading-relaxed:1.55;

  /* ---------- Spacing (4-base) ---------------------------- */
  --ba-space-1:    4px;
  --ba-space-2:    8px;
  --ba-space-3:    12px;
  --ba-space-4:    16px;
  --ba-space-5:    24px;
  --ba-space-6:    32px;
  --ba-space-7:    48px;
  --ba-space-8:    64px;
  --ba-space-9:    96px;
  --ba-space-10:   160px;
  --ba-space-11:   240px;

  /* ---------- Layout -------------------------------------- */
  --ba-page-max:        1280px;
  --ba-gutter-desktop:  48px;
  --ba-gutter-mobile:   24px;
  --ba-grid-label:      5fr;     /* "Who We Are" col */
  --ba-grid-body:       7fr;     /* description col */

  /* ---------- Radii (only two values exist) --------------- */
  --ba-radius-0:    0px;
  --ba-radius-full: 999px;

  /* ---------- Motion -------------------------------------- */
  --ba-ease:        cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart */
  --ba-dur-hover:   180ms;
  --ba-dur-press:   80ms;
  --ba-dur-enter:   480ms;
  --ba-dur-page:    600ms;

  /* ---------- Opacity stops (no shadows) ------------------ */
  --ba-hover-opacity: 0.60;
  --ba-press-opacity: 0.45;
}

/* ============================================================
   Semantic element styles — apply by class
   ============================================================ */

.ba-page {
  background: var(--ba-bg);
  color: var(--ba-fg);
  font-family: var(--ba-font-serif);
  font-size: var(--ba-text-base);
  line-height: var(--ba-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Wordmark + nav — small, all-caps, tracked-out sans */
.ba-wordmark,
.ba-nav-link,
.ba-eyebrow {
  font-family: var(--ba-font-sans);
  font-weight: 600;
  font-size: var(--ba-text-xs);
  letter-spacing: var(--ba-tracking-xloose);
  text-transform: uppercase;
  color: var(--ba-fg);
}

.ba-nav-link {
  font-weight: 400;
  letter-spacing: var(--ba-tracking-loose);
  text-transform: none;
  font-family: var(--ba-font-serif);
  font-style: italic;
  font-size: var(--ba-text-sm);
  color: var(--ba-fg);
  text-decoration: none;
  transition: opacity var(--ba-dur-hover) var(--ba-ease);
}
.ba-nav-link:hover  { opacity: var(--ba-hover-opacity); }
.ba-nav-link:active { opacity: var(--ba-press-opacity); }

/* Display — the homepage statement */
.ba-display {
  font-family: var(--ba-font-serif);
  font-weight: 300;
  font-size: clamp(47px, 7.4vw, 101px);
  line-height: var(--ba-leading-snug);
  letter-spacing: var(--ba-tracking-tight);
}

/* Headlines (section labels like "Who We Are") */
.ba-h1 {
  font-family: var(--ba-font-serif);
  font-weight: 300;
  font-size: var(--ba-text-xl);
  line-height: var(--ba-leading-tight);
  letter-spacing: var(--ba-tracking-tight);
}
.ba-h2 {
  font-family: var(--ba-font-serif);
  font-weight: 300;
  font-size: var(--ba-text-lg);
  line-height: var(--ba-leading-tight);
}

/* Body */
.ba-body {
  font-family: var(--ba-font-serif);
  font-weight: 300;
  font-size: var(--ba-text-md);
  line-height: var(--ba-leading-relaxed);
  color: var(--ba-fg);
  text-wrap: pretty;
}
.ba-body-dim { color: var(--ba-fg-2); }

/* "Learn More…" — text-only call to action */
.ba-cta {
  font-family: var(--ba-font-serif);
  font-size: var(--ba-text-sm);
  color: var(--ba-fg-2);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--ba-dur-hover) var(--ba-ease);
  background: none;
  border: 0;
  padding: 0;
}
.ba-cta:hover { color: var(--ba-fg); text-decoration: underline; text-underline-offset: 4px; }
.ba-cta:active{ opacity: var(--ba-press-opacity); }

/* Mono (timestamps, file labels) */
.ba-mono {
  font-family: var(--ba-font-mono);
  font-size: var(--ba-text-xs);
  letter-spacing: 0;
  color: var(--ba-fg-3);
}

/* ============================================================
   Helpers
   ============================================================ */
.ba-grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.06;
  pointer-events: none;
}