/* Hallmark · macrostructure: inherited (ported storefront) · tone: technical · anchor hue: 178
 * Flowscale — shared theme layer. D1 dark design system, inherited from live flowboardhq.com.
 * Brand contract: flowscale repo → brands/ai-agency-os/design.md
 *
 * WHY THIS FILE EXISTS
 * The 30 ported storefront pages each carried an inline tailwind.config. The colour + type
 * layer was swapped mechanically (a polarity inversion: the source theme is light-paper).
 * Two things could not be fixed by swapping values, and both are fixed here, once, for all
 * 30 pages instead of 30 times:
 *
 *   1. The source had TWO surface systems. Default = light page (paper bg / ink text), plus
 *      321 high-contrast feature bands (bg-ink / text-paper). Inverting token values flipped
 *      BOTH, so the feature bands turned near-white and the page alternated light/dark
 *      instead of reading as one dark theme. Here the bands become inset slate, and their
 *      light-on-dark text pairs are restored by descendant selector, which also handles the
 *      common case where text-paper sits on a CHILD of the band, not the band itself.
 *
 *   2. `text-paper` is overloaded. On a feature band it means "light text on dark". On a
 *      teal button (bg-stamp) it means "dark ink on the accent", which is correct and must
 *      NOT be touched. Scoping the override to [class*="bg-ink"] preserves both.
 */

/* --- D1 tokens, for any new hand-written CSS ------------------------------- */
:root {
  --color-surface: #0E1A1F;         /* oklch(21% .02 225)    page ground        */
  --color-surface-alt: #152328;     /* oklch(24.5% .022 225) raised             */
  --color-surface-sunken: #081216;  /* oklch(17.5% .018 225) inset band         */
  --color-text-primary: #F2F6F8;    /* oklch(97% .005 225)                      */
  --color-text-secondary: #A9B3B7;  /* oklch(76% .012 225)                      */
  --color-text-muted: #828B8F;      /* oklch(63% .012 225)                      */
  --color-border: #2B383D;          /* oklch(33% .02 225)                       */
  --color-primary: #68CDB7;         /* oklch(78% .1 178)     UI accent on dark  */
  --color-primary-dark: #46BBA5;    /* oklch(72% .11 178)                       */
  --color-primary-light: #08362E;   /* oklch(30% .05 178)    tinted panel       */
  --color-brand: #0CA58F;           /* the logo teal, light grounds + print only */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, sans-serif;
  --font-sans: Geist, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}

/* --- 1. Feature bands: was a dark panel on a light page -------------------- */
.bg-ink { background-color: var(--color-surface-sunken) !important; }
.bg-ink-2 { background-color: var(--color-surface-alt) !important; }

/* Restore light-on-dark text inside those bands. Covers the band element itself
   and any descendant, and every opacity variant (text-paper/70, /80 …). */
[class*="bg-ink"][class*="text-paper"],
[class*="bg-ink"] [class*="text-paper"] { color: var(--color-text-primary) !important; }

/* Hairlines inside the bands were light-on-dark; keep them light, just quieter. */
[class*="bg-ink"] [class*="border-paper"],
[class*="bg-ink"][class*="border-paper"] { border-color: rgba(242, 246, 248, 0.14) !important; }

/* Cards sitting on a band read as slightly raised rather than punched out. */
[class*="bg-ink"] .bg-paper { background-color: var(--color-surface-alt) !important; }

/* --- 1b. Textures calibrated for a light ground --------------------------- */
/* .rule-dot drew from currentColor: dark ink dots on warm paper. Inverted, currentColor
   is near-white, so the dot field renders far too strong and fights the headline.
   Decouple it from currentColor and pin it to a quiet light value. */
.rule-dot {
  background-image: radial-gradient(rgba(242, 246, 248, 0.13) 1px, transparent 1px) !important;
}
/* Screen-blended noise reads stronger on dark than the original did on paper. */
.grain::before { opacity: 0.03 !important; }

/* --- 2. Accent legibility -------------------------------------------------- */
/* Dark ink on the teal accent is correct and deliberate; lock it so the band
   override above can never leak into a button. */
.bg-stamp, .bg-stamp * { color: var(--color-surface) !important; }
.bg-stamp [class*="text-paper"] { color: var(--color-surface) !important; }

/* --- 3. D1 shared primitives ---------------------------------------------- */
h1, h2, h3, h4 { letter-spacing: -0.02em; }
.tnum { font-variant-numeric: tabular-nums; }
.fig {
  border-radius: 0.75rem;
  border: 1px solid var(--color-border);
  box-shadow: 0 28px 70px -30px rgba(0, 2, 4, 0.6);
  overflow: hidden;
}

/* --- 4. Mobile floor (hallmark gates 62, 63) ------------------------------- */
html, body { overflow-x: clip; }
h1, h2, h3 { overflow-wrap: anywhere; min-width: 0; }

/* --- 5. Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition-duration: 150ms !important; transform: none !important; }
  .js .reveal { transform: none !important; }
  .lift:hover { transform: none !important; }
}