/* Nawab Labs — Imprint
   Drop-in tokens and liquid-glass surfaces for the static site.
   No build step, no third-party scripts.

   Self-host the fonts in /fonts/ as WOFF2. Do not load a third-party font host.
   Do not load fonts from fonts.googleapis.com: the site privacy policy
   says there are no third-party scripts or trackers.

   Dark is the primary presentation. Light is the alternate.
   Contrast (WCAG 2.2, contrast-ratio of the two sRGB colours):

   Dark
     ink    #F3F1EA on atmosphere #070A09    17.59:1  AAA
     ink    #F3F1EA on mid         #10201A    14.94:1  AAA
     muted  #A8B0AA on atmosphere #070A09     8.95:1  AAA
     muted  #A8B0AA on mid         #10201A     7.60:1  AAA
     accent #8FBF9A on atmosphere #070A09     9.55:1  AAA  (links, small text)
     accent #8FBF9A on mid         #10201A     8.11:1  AAA
     on-accent #070A09 on accent  #8FBF9A     9.55:1  AAA
     ink    #F3F1EA on bloom       #2F5A45     6.96:1  AA
     accent #8FBF9A on bloom       #2F5A45     3.78:1  AA large only — do not
                                                       use sage text on holly.

   Light
     ink    #1B1C1F on paper       #F3F1EA    15.08:1  AAA
     ink    #1B1C1F on mist        #E8EFEA    14.58:1  AAA
     muted  #5B5E66 on paper       #F3F1EA     5.74:1  AA
     muted  #5B5E66 on mist        #E8EFEA     5.55:1  AA
     accent #2F5A45 on paper       #F3F1EA     6.96:1  AA
     accent #2F5A45 on mist        #E8EFEA     6.73:1  AA
     on-accent #F3F1EA on accent  #2F5A45     6.96:1  AA
*/

/* Official heading face. ExtraBold is reserved for the outlined lockup
   SVGs and is not loaded here. Bold is H1, SemiBold is H2. */
@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/SourceSans3-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/SourceSans3-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --atmosphere-0: #070A09;
  --atmosphere-1: #10201A;
  --bloom: #2F5A45;
  --atmosphere: radial-gradient(ellipse 90% 70% at 8% 0%, rgba(47, 90, 69, 0.92) 0%, rgba(47, 90, 69, 0) 58%),
    radial-gradient(ellipse 80% 60% at 108% 92%, rgba(143, 191, 154, 0.42) 0%, rgba(143, 191, 154, 0) 55%),
    radial-gradient(ellipse 50% 40% at 70% 30%, rgba(20, 48, 36, 0.7) 0%, transparent 70%),
    linear-gradient(180deg, var(--atmosphere-1) 0%, var(--atmosphere-0) 100%);

  --glass: rgba(255, 255, 255, 0.08);
  --glass-rim: rgba(255, 255, 255, 0.2);
  --glass-highlight: rgba(255, 255, 255, 0.32);
  --glass-solid: #15241E; /* fallback when transparency is reduced */

  --ink: #F3F1EA;
  --muted: #A8B0AA;
  --accent: #8FBF9A;
  --on-accent: #070A09;
  --line: rgba(255, 255, 255, 0.12);

  --radius: 20px;
  --shadow: 0 10px 36px rgba(0, 0, 0, 0.28);

  --font-heading: "Manrope", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --measure: 44rem;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --atmosphere-0: #F3F1EA;
    --atmosphere-1: #E8EFEA;
    --bloom: #C5D9CC;
    --atmosphere: radial-gradient(ellipse 90% 70% at 8% 0%, rgba(197, 217, 204, 0.95) 0%, rgba(197, 217, 204, 0) 58%),
      radial-gradient(ellipse 80% 60% at 108% 92%, rgba(47, 90, 69, 0.12) 0%, transparent 55%),
      linear-gradient(180deg, var(--atmosphere-1) 0%, var(--atmosphere-0) 100%);

    --glass: rgba(255, 255, 255, 0.62);
    --glass-rim: rgba(255, 255, 255, 0.7);
    --glass-highlight: rgba(255, 255, 255, 0.9);
    --glass-solid: #FFFFFF;

    --ink: #1B1C1F;
    --muted: #5B5E66;
    --accent: #2F5A45;
    --on-accent: #F3F1EA;
    --line: rgba(27, 28, 31, 0.12);

    --shadow: 0 10px 36px rgba(16, 32, 26, 0.1);
  }
}

/* Page atmosphere (gradient lives behind the glass) */
.atmosphere,
html {
  background-color: var(--atmosphere-0);
  background-image: var(--atmosphere);
  background-attachment: fixed;
}

body {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
}

h1,
h2,
h3,
.brand {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.02em;
}

h1 {
  font-weight: 700;
  font-size: 2.125rem;
}

h2 {
  font-size: 1.35rem;
}

.lede {
  color: var(--muted);
  font-size: 1.15rem;
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Liquid-glass card / header / app-grid chrome.
   Frosted surface, light rim, inset specular, soft depth.
   TaxPeek product cards should NOT use this: they keep cream/navy surfaces. */
.glass {
  position: relative;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  border: 1px solid var(--glass-rim);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    var(--shadow);
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--glass-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass {
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
  }
}