/*
 * NoMoldWNC — Theme
 * Adapted from the My Pure Environment / Pure Maintenance design system.
 * Palette is drawn straight from the NoMoldWNC logo: royal navy (#0C3181,
 * the state outline and "NO") is the ink — buttons, icons, accents, dark
 * bands — and periwinkle (#9AB9DF, the state fill) is the tint family —
 * soft surfaces, chip backgrounds, and highlights on navy. The brand
 * gradient bridges the two (navy → steel blue) so gradient text stays
 * legible on white. Typeface is Raleway (their brand font). Everything
 * else (spacing, radii, shadows, motion) is inherited faithfully.
 */

/* Fonts are loaded via <link> in the page head (preconnect + stylesheet)
   rather than @import, so the font request doesn't chain behind this file. */

:root {
  /* ── Brand color — navy ink + periwinkle tint, from the logo ────── */
  --color-brand-primary:   #0c3181;   /* Royal navy. Icons, accents, dots, links. */
  --color-brand-secondary: #9ab9df;   /* Periwinkle. Soft accents, highlights on navy. */
  --color-brand-mid:       #4d72bb;   /* Steel blue. 2nd stop of brand gradient, hovers. */
  --color-brand-deep:      #0a2a6e;   /* Deepest navy. Text on white CTAs, fine accents. */
  --color-brand-navy:      #0c3181;   /* Royal navy. Large high-contrast sections (footer, dark bands). */
  --color-brand-navy-deep: #07215e;   /* Deeper navy, gradient/borders within navy sections. */

  --gradient-brand:        linear-gradient(90deg, #0c3181 0%, #4d72bb 100%);
  /* Periwinkle gradients come in two directions depending on the surface:
     on dark, periwinkle lifts toward near-white; on light, periwinkle is the
     bright end and deepens toward steel so it never fades into the white. */
  --gradient-light-on-dark:  linear-gradient(90deg, #9ab9df 0%, #dde9f9 100%);
  --gradient-light-on-light: linear-gradient(90deg, #9ab9df 0%, #4d72bb 100%);
  --gradient-hero-accent:  radial-gradient(circle at 80% 20%, rgba(154,185,223,0.20), transparent 42%);

  /* ── Text ──────────────────────────────────────────────────────── */
  --color-text-primary:    #0f172a;
  --color-text-secondary:  #64748b;
  --color-text-tertiary:   #73839b;   /* darkened from #94a3b8 so small labels pass AA contrast */
  --color-text-body:       #475569;
  --color-text-inverse:    #ffffff;

  /* ── Surface ───────────────────────────────────────────────────── */
  --color-surface-app:     #f7f9fc;   /* very pale periwinkle-white */
  --color-surface-section: #fafbfd;
  --color-surface-card:    #ffffff;
  --color-surface-subtle:  #e9eff8;   /* periwinkle-tinted icon-chip bg */

  /* ── Border ────────────────────────────────────────────────────── */
  --color-border-subtle:    #edf1f7;
  --color-border-default:   #e0e7f0;
  --color-border-brand-30:  rgba(154, 185, 223, 0.55);

  /* ── Status / accent ───────────────────────────────────────────── */
  --color-status-success:  #10b981;
  --color-status-danger:   #f43f5e;
  --color-accent-gold:     #fbbf24;

  /* ── Glass / overlays ──────────────────────────────────────────── */
  --color-glass-bg:          rgba(255, 255, 255, 0.85);
  --color-glass-border:      rgba(255, 255, 255, 0.50);
  --color-glass-bg-dark:     rgba(255, 255, 255, 0.10);
  --color-glass-border-dark: rgba(255, 255, 255, 0.20);

  /* ── Typography: family ────────────────────────────────────────── */
  /* Fraunces (optical-sizing serif) carries the headings; Work Sans
     carries body, UI, and labels. */
  --font-family-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-family-sans: "Work Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ── Typography: weight ────────────────────────────────────────── */
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-heading:   600;   /* Fraunces headings — serif needs less weight than the old 900 sans */
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --font-weight-black:     800;   /* capped: Work Sans tops out at 800 */

  /* ── Typography: scale ─────────────────────────────────────────── */
  --font-size-display:    4rem;
  --font-size-h1:         4.2rem;
  --font-size-h2:         3rem;
  --font-size-h3:         2.25rem;
  --font-size-lead:       1.25rem;
  --font-size-body:       1.125rem;
  --font-size-body-small: 0.9375rem;
  --font-size-button:     1rem;
  --font-size-eyebrow:    0.6875rem;

  /* ── Typography: tracking ──────────────────────────────────────── */
  --tracking-display: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-body:    -0.01em;
  --tracking-label:   0.10em;
  --tracking-eyebrow: 0.40em;

  /* ── Typography: leading ───────────────────────────────────────── */
  --leading-display: 1.05;
  --leading-heading: 1.10;
  --leading-tight:   1.25;
  --leading-body:    1.625;

  /* ── Spacing & layout ──────────────────────────────────────────── */
  --container-max:        1400px;
  --container-max-wide:   1440px;
  --container-pad-x-mob:  1rem;
  --container-pad-x-tab:  1.5rem;
  --container-pad-x-desk: 2rem;

  --section-py-compact:  5rem;
  --section-py-default:  7rem;
  --section-py-spacious: 8rem;
  --section-pt-hero:     10rem;

  /* ── Radii ─────────────────────────────────────────────────────── */
  --radius-button:  1.8rem;
  --radius-card:    3rem;
  --radius-card-lg: 3.5rem;
  --radius-hero:    4.5rem;
  --radius-pill:    9999px;
  --radius-sm:      0.75rem;
  --radius-md:      1rem;

  /* ── Shadows ───────────────────────────────────────────────────── */
  --shadow-subtle:       0 4px 20px rgba(15,23,42,0.02);
  --shadow-glass:        0 10px 30px -10px rgba(15,23,42,0.05);
  --shadow-card:         0 20px 50px -15px rgba(15,23,42,0.04);
  --shadow-menu:         0 30px 60px -15px rgba(15,23,42,0.10);
  --shadow-card-hover:   0 40px 80px -20px rgba(15,23,42,0.06);
  --shadow-image:        0 50px 100px -20px rgba(15,23,42,0.10);
  --shadow-image-large:  0 60px 120px -30px rgba(15,23,42,0.15);
  --shadow-brand-button: 0 15px 30px -5px rgba(12,49,129,0.35);

  /* ── Motion ────────────────────────────────────────────────────── */
  --duration-fast:      200ms;
  --duration-standard:  300ms;
  --duration-medium:    500ms;
  --duration-slow:      700ms;
  --duration-cinematic: 1000ms;

  --ease-standard: ease;
  --ease-out:      ease-out;
  --ease-brand:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ──────────────────────────────────────────────────────── */
html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-family-sans);
  background-color: var(--color-surface-app);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: #d9e4f6; color: #0a2a6e; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Keyboard focus ────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-brand-mid);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--navy :focus-visible,
.cta-band :focus-visible,
.footer :focus-visible,
.hero--video :focus-visible { outline-color: var(--color-brand-secondary); }

/* ── Semantic typography ───────────────────────────────────────── */
/* Headings are Fraunces: lighter weight and gentler tracking than the
   sans system they replace — a tight -0.05em strangles a serif. */
.t-display {
  font-family: var(--font-family-display);
  font-size: clamp(2.25rem, 5vw + 1rem, var(--font-size-h1));
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0;
}
.t-h1, h1 {
  font-family: var(--font-family-display);
  font-size: clamp(2.25rem, 4.5vw + 0.5rem, var(--font-size-h1));
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0;
}
.t-h2, h2 {
  font-family: var(--font-family-display);
  font-size: clamp(2rem, 3.5vw + 0.5rem, var(--font-size-h2));
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0;
}
.t-h3, h3 {
  font-family: var(--font-family-display);
  font-size: clamp(1.5rem, 2vw + 0.5rem, var(--font-size-h3));
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: 0;
}
.t-lead {
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  margin: 0;
}
.t-body, p {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-body);
  color: var(--color-text-body);
  margin: 0;
}
.t-eyebrow {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-secondary);
}
.t-gradient {
  background-image: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ── Brand utilities ───────────────────────────────────────────── */
.bg-brand-gradient { background-image: var(--gradient-brand); }
.text-brand        { color: var(--color-brand-primary); }
.hero-bg-accent    { background-image: var(--gradient-hero-accent); }

.glass-panel {
  background-color: var(--color-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--shadow-glass);
}