/* QualityHubTokens.css — design tokens for the Quality Hub page.
 *
 * Non-scoped (not a .razor.css). Values cascade from :root so every
 * scoped component on the page can reference them via var(--qh-*).
 *
 * Conceptually these tokens belong with the Quality Hub components under
 * Components/FPM/QualityHub/. The file physically sits in wwwroot/css/ so
 * Blazor WASM serves it as a static asset (the Components folder isn't
 * web-accessible). Linked from wwwroot/index.html.
 */

:root {
    /* --- Colors ---------------------------------------------------------- */

    --qh-color-bg:             #F0F2F5;
    --qh-color-surface:        #FFFFFF;
    --qh-color-surface-2:      #F7F8FA;
    --qh-color-border:         #DDE1E8;
    --qh-color-border-strong:  #C8CDD8;

    --qh-color-text:           #1A1E2E;
    --qh-color-text-2:         #4A5068;
    --qh-color-text-3:         #7A8099;

    --qh-color-accent:         #1B4F9E;
    --qh-color-accent-dark:    #163F82;
    --qh-color-accent-soft:    #E8EEF9;

    --qh-color-green:          #0D7C5F;
    --qh-color-green-soft:     #E6F4F0;

    --qh-color-warn:           #B85C00;
    --qh-color-warn-soft:      #FFF3E6;

    --qh-color-danger:         #C0392B;
    --qh-color-danger-soft:    #FDECEA;

    --qh-color-gold:           #9B6F00;
    --qh-color-gold-soft:      #FDF5E0;

    --qh-color-slate:          #4F6587;
    --qh-color-slate-soft:     #E5EAF2;

    /* --- Shadows -------------------------------------------------------- */

    --qh-shadow-sm:            0 1px 4px rgba(0, 0, 0, .10);
    --qh-shadow-md:            0 3px 12px rgba(0, 0, 0, .12);

    /* --- Typography ----------------------------------------------------- */

    --qh-font-sans:            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --qh-font-mono:            ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --qh-fs-eyebrow:           10.5px;
    --qh-fs-body-s:            11.5px;
    --qh-fs-body:              12.5px;
    --qh-fs-body-l:            13px;
    --qh-fs-h2:                18px;
    --qh-fs-hero:              22px;
    --qh-fs-headline-mono:     24px;
    --qh-fs-headline-mono-l:   28px;

    --qh-weight-regular:       500;
    --qh-weight-semibold:      600;
    --qh-weight-bold:          700;
    --qh-weight-extrabold:     800;

    --qh-letter-eyebrow:       .12em;
    --qh-letter-title:         -0.005em;
    --qh-letter-hero:          -0.01em;

    /* --- Spacing (6-step scale derived from the JSX mockup) ------------- *
     * Snap rules:
     *   6 → s (8)     14 → m (12)     18 → l (16)
     *   10 → s (8)                    20 → xl (24)
     *
     * One-off locations that can't snap document the literal with an
     * inline /* one-off because X *\/ comment.
     */

    --qh-space-xs:             4px;
    --qh-space-s:              8px;
    --qh-space-m:              12px;
    --qh-space-l:              16px;
    --qh-space-xl:             24px;
    --qh-space-xxl:            32px;

    /* --- Radii ---------------------------------------------------------- */

    --qh-radius-card:          6px;
    --qh-radius-button:        6px;
    --qh-radius-pill:          99px;
    --qh-radius-stripe:        4px;
}