/* ===================================================================
   AI SaaS Radar - shared design layer
   Loaded by every page. Holds tokens, type, browser-surface theming,
   and the motion vocabulary. Page-specific rules stay in the page.

   Note on the cascade: the Tailwind CDN injects its stylesheet at
   runtime, after this file. Rules here that override a Tailwind
   utility are scoped under `body` so they win on specificity rather
   than on source order.
   =================================================================== */

:root {
    --bg:          #0b1120;
    --surface:     #0f172a;
    --surface-2:   #111c2e;
    --line:        #1e293b;
    --ink:         #f8fafc;
    --ink-muted:   #94a3b8;  /* 7.3:1 on --bg. slate-500 measured 3.97:1
                                and failed AA for body copy. */
    --ink-faint:   #64748b;  /* decorative and metadata only */
    --accent:      #22d3ee;
    --accent-deep: #06b6d4;

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

    accent-color: var(--accent-deep);
    color-scheme: dark;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;   /* clears the 4rem sticky header */
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: 'Archivo', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------
   Typography
   --------------------------------------------------------------- */
h1, h2, h3, h4 {
    text-wrap: balance;
    letter-spacing: -0.022em;
}
h1 { letter-spacing: -0.038em; }
p  { text-wrap: pretty; }

.measure { max-width: 68ch; }

/* Mono means measurement here: readouts, counts, timestamps. */
body .font-mono, body code, body kbd, body samp {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'zero' 1;
}

/* ---------------------------------------------------------------
   Browser surfaces
   These ship with defaults that belong to no design system.
   --------------------------------------------------------------- */
::selection {
    background: rgba(34, 211, 238, 0.28);
    color: #ffffff;
}

input, textarea, select { caret-color: var(--accent); }

* { scrollbar-width: thin; scrollbar-color: #1e3a52 var(--bg); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background: #1e3a52;
    border-radius: 99px;
    border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #2b5171; }

/* One visible, keyboard-only focus ring on every control. The pages
   previously relied on the browser default, which these dark surfaces
   rendered nearly invisible. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* ---------------------------------------------------------------
   Motion vocabulary
   --------------------------------------------------------------- */
@keyframes radar-sweep {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.animate-radar-sweep {
    animation: radar-sweep 4s linear infinite;
    transform-origin: center;
}

/* The one authored entrance: content settles on load, rather than every
   section animating itself on scroll. */
@keyframes settle {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.settle   { animation: settle 620ms var(--ease-out) both; }
.settle-1 { animation-delay: 60ms; }
.settle-2 { animation-delay: 130ms; }
.settle-3 { animation-delay: 200ms; }

/* ---------------------------------------------------------------
   Reduced motion
   The vestibular triggers on this site are the perpetual radar sweep,
   the ping rings, and the horizontally scrolling ticker.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .animate-ticker { animation: none !important; transform: none !important; }
    .settle { animation: none !important; }
}