/* The single source of design-token defaults for Bonoscan.Components. Link once
   (_content/Bonoscan.Components/bonoscan.css); override any token from your own :root.
   :where(:root) has zero specificity, so a plain `:root { --scanner-accent: … }` always wins,
   regardless of stylesheet order. Both the DOM chrome and the <canvas> viewfinder (which reads
   these via getComputedStyle) inherit from here. */
:where(:root) {
    /* ---- palette ---- */
    --scanner-accent: #4ef2c9;
    --scanner-accent-ink: #04130f;
    --scanner-amber: #f5b454;
    --scanner-danger: #ff6b6b;
    --scanner-text: #eef2f4;
    --scanner-bg: #000;
    --scanner-torch: #ffde8a;            /* torch-on highlight */

    /* ---- typography ---- */
    --scanner-font: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --scanner-mono: "Spline Sans Mono", ui-monospace, monospace;
    --scanner-brand-font-size: 1.05rem;
    --scanner-status-font-size: .7rem;
    --scanner-hint-font-size: 1.02rem;
    --scanner-pill-font-size: .9rem;
    --scanner-btn-font-size: 1rem;

    /* ---- surfaces & borders ---- */
    --scanner-chrome-bg: rgba(10, 14, 16, .72);
    --scanner-chrome-border: rgba(255, 255, 255, .14);
    --scanner-veil-bg: radial-gradient(120% 120% at 50% 35%, rgba(8, 12, 14, .4), rgba(8, 12, 14, .85));
    --scanner-ghost-bg: rgba(255, 255, 255, .06);
    --scanner-ghost-bg-hover: rgba(255, 255, 255, .1);
    --scanner-ghost-border: rgba(255, 255, 255, .22);
    --scanner-ghost-border-hover: rgba(255, 255, 255, .42);
    --scanner-dropzone-border: 2px dashed var(--scanner-chrome-border);

    /* ---- radii & spacing ---- */
    --scanner-radius-pill: 999px;
    --scanner-radius-control: 50%;
    --scanner-pad-top: .8rem;
    --scanner-pad-bottom: 1.1rem;
    --scanner-pad-edge: .9rem;
    --scanner-gap: .6rem;                /* control gap (button rows / action bars) */
    --scanner-veil-gap: 1.2rem;          /* idle/veil vertical rhythm */
    --scanner-btn-pad: .8rem 1.4rem;
    --scanner-pill-pad: .5rem .9rem;
    --scanner-status-pad: .3rem .6rem;

    /* ---- sizing ---- */
    --scanner-width: 100%;
    --scanner-height: 100%;
    --scanner-control-size: 46px;        /* torch / round controls */
    --scanner-dot-size: .55rem;          /* status-pill dot */
    --scanner-spinner-size: 1.15rem;     /* processing-overlay spinner */

    /* ---- effects ---- */
    --scanner-blur: 8px;                 /* frosted-glass chrome backdrop blur */
    --scanner-primary-shadow: 0 6px 24px -8px var(--scanner-accent);
    --scanner-brand-shadow: 0 1px 8px rgba(0, 0, 0, .7);
    --scanner-torch-glow: 0 0 24px -2px color-mix(in srgb, var(--scanner-torch) 45%, transparent);

    /* ---- canvas viewfinder only (read by js/overlay.js via getComputedStyle) ---- */
    --scanner-guide: #ffffff;
    --scanner-overlay-scrim: #000;
}

/* Shared chrome primitives used by both DocumentScanner and ResultView (defined once).
   .brand/.status are namespaced under the scanner roots so they can't collide with a host's
   own .brand/.status; .scn-* are prefixed and global-safe. */
.scanner-app .brand, .result-view .brand {
    position: absolute;
    top: var(--scanner-pad-top);
    left: var(--scanner-pad-edge);
    z-index: 5;
    font-weight: 700;
    font-size: var(--scanner-brand-font-size);
    letter-spacing: .02em;
    text-shadow: var(--scanner-brand-shadow);
    pointer-events: none;
}
.scanner-app .brand span, .result-view .brand span { color: var(--scanner-accent); }

.scanner-app .status, .result-view .status {
    position: absolute;
    top: var(--scanner-pad-top);
    right: var(--scanner-pad-edge);
    z-index: 5;
    font-family: var(--scanner-mono);
    font-size: var(--scanner-status-font-size);
    letter-spacing: .12em;
    padding: var(--scanner-status-pad);
    border-radius: var(--scanner-radius-pill);
    background: var(--scanner-chrome-bg);
    border: 1px solid var(--scanner-chrome-border);
    backdrop-filter: blur(var(--scanner-blur));
    pointer-events: none;
}

.scn-btn {
    font-family: inherit;
    font-size: var(--scanner-btn-font-size);
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    padding: var(--scanner-btn-pad);
    border-radius: var(--scanner-radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.scn-btn:active { transform: translateY(1px) scale(.99); }
.scn-primary {
    background: var(--scanner-accent);
    color: var(--scanner-accent-ink);
    box-shadow: var(--scanner-primary-shadow);
}
.scn-ghost {
    background: var(--scanner-ghost-bg);
    color: var(--scanner-text);
    border-color: var(--scanner-ghost-border);
}
.scn-ghost:hover { border-color: var(--scanner-ghost-border-hover); background: var(--scanner-ghost-bg-hover); }

/* Standalone upload dropzone (DocumentUpload, no camera). A full-area, centered drop target.
   EVERY colour comes from a --scanner-* token (consumers re-theme by overriding those tokens, or
   the whole border via --scanner-dropzone-border, or the global .scn-dropzone* rules, or the
   component's Class parameter). The real <input type=file> overlays the zone (transparent) so
   click-anywhere + drag-and-drop work and stay keyboard-operable. Global (not scoped) → no ::deep. */
.scn-dropzone {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    text-align: center;
    padding: var(--scanner-pad-edge);
    color: var(--scanner-text);
    background: var(--scanner-veil-bg);
    border: var(--scanner-dropzone-border);
    transition: border-color .15s, background-color .15s;
}
.scn-dropzone-hint { line-height: 1.5; opacity: .92; max-width: 28rem; padding: 0 1rem; }
.scn-dropzone-error { color: var(--scanner-danger); max-width: 28rem; padding: 0 1rem; }
/* dragover + keyboard focus (the overlay <input> is transparent) — derived from the accent token. */
.scn-dropzone.is-dragover,
.scn-dropzone:focus-within { border-color: var(--scanner-accent); }
.scn-dropzone.is-dragover { background: color-mix(in srgb, var(--scanner-accent) 8%, transparent); }
.scn-dropzone.is-busy { opacity: .7; }
.scn-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.scn-dropzone.is-busy input[type="file"] { cursor: default; pointer-events: none; }