/* The Drake Group's palette and type, per the official style guide — the same tokens the
   Configurator uses, so the two apps look like one company's software.

   These are the single source of truth for brand colour. Reference the variables; don't
   reintroduce hex values in component files. */

:root {
    --drake-primary: #212121;
    --drake-primary-dark: #1a1a1a;
    --drake-grey-light: #e0e0e0;
    --drake-grey: #757575;
    --drake-accent: #f44336;
    --drake-accent-dark: #c62828;

    --drake-surface: #ffffff;
    --drake-surface-alt: #f7f7f7;
    --drake-border: #dee2e6;
    --drake-ink: #212529;

    /* The lightbox is its own dark world, so it gets its own scale rather than borrowing the
       sidebar's. */
    --drake-stage: #121212;
    --drake-stage-chrome: #1a1a1a;
    --drake-stage-panel: #1e1e1e;
    --drake-stage-line: #2e2e2e;
}

body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--drake-ink);
    background: var(--drake-surface);
}

h1, h2, h3, h4, h5, h6, .condensed {
    font-family: 'Roboto Condensed', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: var(--drake-accent);
}

a:hover, .btn-link:hover {
    color: var(--drake-accent-dark);
}

.btn-primary {
    color: #fff;
    background-color: var(--drake-accent);
    border-color: var(--drake-accent-dark);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--drake-accent-dark);
    border-color: var(--drake-accent-dark);
}

.btn-outline-primary {
    color: var(--drake-accent);
    border-color: var(--drake-accent);
}

.btn-outline-primary:hover {
    background-color: var(--drake-accent);
    border-color: var(--drake-accent-dark);
}

.form-control:focus, .form-select:focus, .btn:focus {
    border-color: var(--drake-accent);
    box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.2);
}

.spinner-border {
    color: var(--drake-accent);
}