/* ============================================
   QuadraScan design tokens
   --------------------------------------------
   Single :root source for stacking context (z-*), theme (--qs-*), and derived
   values. Loads before index.css / viewer.css; qs-theme.js may override API
   keys on :root inline.
   ============================================ */

:root {
    /* Stacking — shared by embed, index, and viewer */
    --z-background:     0;
    --z-content:        10;
    --z-ui-elements:    100;
    --z-controls:       200;
    --z-results-panel: 300;
    --z-modals:        1000;
    --z-tooltips:      2000;
    --z-errors:        9999;

    /* API — surfaces */
    --qs-bg:                 #000;        /* backgroundColor */
    --qs-surface-card:       #1c1c1e;    /* surfaceCardColor — card / panel backgrounds */
    --qs-popup-bg:           #333333;    /* popupBackgroundColor — dialogs / sheets */
    --qs-scan-tile-bg:       #222222;    /* scanTileBackgroundColor — landing scan tiles + upload grid */
    --qs-on-scan-tile:       #a8a8a8;    /* onScanTileColor — pose silhouette + label on scan tiles */

    /* API — accents */
    --qs-primary:           #eeeeee;
    --qs-on-primary:        #1a1a1a;
    --qs-secondary:         #a78bfa;
    --qs-on-secondary:      #ffffff;

    /* API — typography */
    --qs-text:              #ffffff;
    --qs-on-surface-card:    #ffffff;   /* onSurfaceCardColor — text on surfaceCard panels (measurements) */
    --qs-popup-text:        #ffffff;    /* popupTextColor */
    --qs-font:              -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;

    /* API — shape */
    --qs-button-radius:     12px;

    /*
     * UI accent — camera / sequential capture (semantic “focus”, not licensee brand).
     */
    --qs-focus-accent:       #4da6ff;

    /*
     * Semantic colors — invalid form copy, destructive actions, info alerts, loader idle ring.
     * Not exposed in theme API.
     */
    --qs-semantic-danger:         #f87171;
    --qs-semantic-danger-soft:    #e8a0a0;
    --qs-semantic-danger-hover: #f5b8b8;
    --qs-status-info-border:   var(--qs-focus-accent);
    --qs-status-info-bg:       rgba(30, 50, 80, 0.52);
    --qs-loader-track:         rgba(90, 90, 105, 0.4);

    /* Derived — not part of public theme API */
    --qs-text-muted:         color-mix(in srgb, var(--qs-text) 60%, transparent);
    --qs-on-surface-card-muted: color-mix(in srgb, var(--qs-on-surface-card) 60%, transparent);
    --qs-on-surface-border-soft: color-mix(in srgb, var(--qs-on-surface-card) 14%, transparent);

    /*
     * Nested surfaces (anthropometrics rows, darker insets inside surfaceCard).
     */
    --qs-surface-inner:      color-mix(in srgb, var(--qs-surface-card) 60%, var(--qs-on-surface-card) 12%);

    --qs-border:             color-mix(in srgb, var(--qs-text) 22%, transparent);
    --qs-border-soft:        color-mix(in srgb, var(--qs-text) 8%, transparent);

    --qs-primary-hover:        color-mix(in srgb, var(--qs-primary) 88%, white);
    --qs-secondary-hover:      color-mix(in srgb, var(--qs-secondary) 82%, white);
    --qs-secondary-border:     color-mix(in srgb, var(--qs-on-secondary) 30%, transparent);

    /* Popups: borders/muted text derived from popupBackgroundColor + popupTextColor */
    --qs-popup-radius:       18px;
    --qs-popup-text-muted:   color-mix(in srgb, var(--qs-popup-text) 55%, transparent);
    --qs-popup-border-soft:   color-mix(in srgb, var(--qs-popup-text) 14%, transparent);
    --qs-popup-inset-bg:     color-mix(in srgb, var(--qs-popup-bg) 78%, var(--qs-popup-text) 22%);
    --qs-popup-inset-border: color-mix(in srgb, var(--qs-popup-text) 10%, transparent);
}