:root {
    /* Core surfaces: deep console black, three-step stack */
    --dark-style-bg: #12141a;
    --dark-style-block-bg: #191d24;
    --dark-style-highlight: #232a35;
    --dark-style-highlight-hover: #1c212a;

    --text: #eef0f4;
    --text-dim: #8b93a3;

    /* Signal system: red = capturing/active (tally light), green = done (VU peak) */
    --accent-color: #ff2d55;
    --accent-color-disabled: #5c3542;
    --accent-color-dim: rgba(255, 45, 85, 0.16);
    --signal: #35d399;
    --signal-dim: rgba(53, 211, 153, 0.16);

    --icon-colour: #9aa1af;
    --icon-colour-hover: #f3f5f8;

    --line: #2b3140;

    --block-box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
    --selection-box-shadow:
        rgba(0, 0, 0, 0.25) 0px 40px 55px,
        rgba(0, 0, 0, 0.12) 0px -12px 30px,
        rgba(0, 0, 0, 0.35) 0px 4px 6px;

    --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

@font-face {
    font-family: "Roboto";
    src: url('../fonts/Roboto-Medium.ttf');
    /* Pin this face to weight 500 so bold/regular text falls back to the
       system sans instead of the browser faking bold from a Medium ttf. */
    font-weight: 500;
}

/* Without this, every element's padding/border adds ON TOP of its set
   width/height instead of being included in it — which is exactly why
   the Fetch button and url-input were overflowing their container. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--line);
    border-radius: 10px;
    border: 2px solid var(--dark-style-bg);
}

body {
    background-color: var(--dark-style-bg);
    background-image: radial-gradient(circle at 15% 0%, rgba(255, 45, 85, 0.06), transparent 45%);
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

.container {
    border-radius: 12px;
    border: 1px solid var(--line);
    background-color: var(--dark-style-highlight-hover);
    transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
    box-shadow: var(--block-box-shadow);
    width: 80%;
}

.container:has(:focus) {
    background-color: var(--dark-style-highlight);
    border-color: var(--accent-color-dim);
    box-shadow: var(--selection-box-shadow);
}

.container__dark {
    background-color: var(--dark-style-block-bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
    width: 80%;
    transition: all 0.3s;
}

.container__dark:has(:focus):not(.container__hover-focus) {
    background-color: var(--dark-style-highlight);
    border-color: var(--accent-color-dim);
    box-shadow: var(--selection-box-shadow);
}

.container__dark.container__hover-focus:hover {
    background-color: var(--dark-style-highlight);
    border-color: var(--accent-color-dim);
    box-shadow: var(--selection-box-shadow);
}

:focus {
    outline: none;
}

::selection {
    background-color: var(--accent-color);
    color: white;
}

@keyframes tally-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}