/* ============================================================================
   ow111d-1bd1 — AUDIT READINESS DESIGN TOKENS

   THE PROBLEM
   Every page in the hub referenced tokens like var(--hairline) and var(--ink),
   but NOTHING defined them. Each page carried its own inline fallback, and the
   fallbacks disagreed:

       --hairline   #d0d5dd  |  #e4e7ec  |  #e5e7eb  |  #f0f0f0   (4 border greys)
       --muted      #6b7280  |  #98a2b3  |  #9ca3af               (3 muted greys)
       --ink        #101828  |  #1a1a2e                           (2 body inks)
       --accent     #C2A12B  |  #e8a838                           (gold vs orange)

   So a border on Frameworks rendered a different grey from the identical border
   on Evidence Areas, and the accent shifted between brand gold and a generic
   orange depending on which page you were looking at. Nobody chose that — it is
   what happens when 900+ hardcoded hex values accumulate across 25 files with no
   single source of truth.

   THE FIX
   Define each token ONCE here, mapped to the Verisq brand palette in
   verisq-hub-chrome.css (--vsq-*). The per-page fallbacks still exist in the
   markup and are now dead code: the real value always wins because these
   definitions cascade in. That means no page needed editing to adopt this, and
   any page added later inherits the correct values automatically.

   Scoped to the readiness hub so it cannot disturb other hubs mid-flight.
   ========================================================================= */

.hl-shell[data-hub="readiness"],
.rdns-scope {
    /* ── surfaces ─────────────────────────────────────────────────────── */
    --paper:        var(--vsq-surface, #FFFFFF);
    --canvas:       var(--vsq-bg-base, #FAFAF9);
    --canvas-warm:  var(--vsq-bg-soft, #F4F4F2);
    --sunken:       var(--vsq-surface-sunken, #F4F4F2);

    /* ── borders — ONE grey, not four ─────────────────────────────────── */
    --hairline:        var(--vsq-border, #E7E5E0);
    --hairline-soft:   var(--vsq-border-soft, #F1EFEB);
    --hairline-strong: var(--vsq-border-strong, #D4D2CC);

    /* ── text ─────────────────────────────────────────────────────────── */
    --ink:       var(--vsq-text, #0A0A0B);
    --ink-soft:  var(--vsq-text-mid, #4A4A52);
    --muted:     var(--vsq-text-muted, #8A8A92);
    --faint:     var(--vsq-text-faint, #C8C8D0);

    /* ── brand accent — gold, never the stray orange ──────────────────── */
    --accent:      var(--vsq-gold-deep, #C2A12B);
    --accent-warm: var(--vsq-gold-warm, #E1951B);
    --accent-soft: var(--vsq-gold-soft, rgba(234, 194, 52, 0.10));
    --accent-glow: var(--vsq-gold-glow, rgba(234, 194, 52, 0.22));
    --gold:        var(--vsq-gold, #EAC234);

    /* ── status — semantic, consistent across every readiness surface ─── */
    --have:    #12A150;   /* healthy / in place      */
    --partial: #E1951B;   /* partial / in progress   */
    --wrong:   #D64545;   /* gap / failing           */
    --have-soft:    rgba(18, 161, 80, 0.10);
    --partial-soft: rgba(225, 149, 27, 0.12);
    --wrong-soft:   rgba(214, 69, 69, 0.10);

    /* ── typography ───────────────────────────────────────────────────── */
    --font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;

    /* ── elevation — a consistent ladder rather than ad-hoc shadows ───── */
    --sh-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --sh-md: 0 4px 16px rgba(16, 24, 40, .07);
    --sh-lg: 0 18px 40px -20px rgba(16, 24, 40, .28);

    /* ── radii ────────────────────────────────────────────────────────── */
    --r-sm: 7px;
    --r-md: 11px;
    --r-lg: 16px;
}

/* ── Focus visibility ────────────────────────────────────────────────────
   Interactive elements across the hub relied on the browser default outline,
   which is invisible against the warm canvas. A keyboard user could not see
   where they were. One consistent gold focus ring instead. */
.hl-shell[data-hub="readiness"] :is(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ── Motion ──────────────────────────────────────────────────────────────
   Respect a user's reduced-motion preference — several readiness surfaces
   animate panels and progress rings on open. */
@media (prefers-reduced-motion: reduce) {
    .hl-shell[data-hub="readiness"] *,
    .hl-shell[data-hub="readiness"] *::before,
    .hl-shell[data-hub="readiness"] *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Scroll-target highlight ─────────────────────────────────────────────
   Paired with window.verisqScrollToId (site.js): briefly marks where the user
   landed after an in-page jump, so a silent scroll on a long control page
   doesn't leave them wondering whether anything happened. */
.verisq-scroll-flash {
    animation: verisq-flash 1.2s ease-out;
    border-radius: var(--r-md);
}
@keyframes verisq-flash {
    0%   { box-shadow: 0 0 0 0 var(--accent-glow), 0 0 0 3px var(--accent-soft); }
    100% { box-shadow: 0 0 0 0 rgba(0,0,0,0),      0 0 0 0 rgba(0,0,0,0); }
}