/* Deep Door AI brand base.
   Palette, type and radii from "DeepDoor Phase 2 - Visual Identity" (Asset Tracker design references).
   IBM Plex is self-hosted under the SIL OFL; LICENSE.txt stays beside the fonts. */

@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Text.woff2") format("woff2"); font-weight: 450; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ink-900: #0E1416; --ink-800: #1A2327; --ink-700: #2C3A3F; --ink-600: #55666C;
  --teal-900: #062120; --teal-800: #0F3B38; --teal-600: #1B5A55; --teal-500: #2F7D76;
  --teal-400: #6BA5A0; --teal-200: #AECFCB; --teal-50: #E4EEED;
  --stone-50: #FAF8F4; --stone-100: #F1EDE6; --stone-200: #E2DCD1; --stone-300: #C4BCAE;
  --stone-500: #8A8377; --stone-700: #5C574E;
  --slate-700: #3F5A73; --slate-500: #7A93A8; --slate-200: #D6DEE6;

  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius-control: 6px;
  --radius-container: 9px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.label { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* The parent mark: a filled keyhole silhouette. */
.keyhole { display: inline-block; width: 1em; height: 1.54em; flex: none; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}