/*
 * Theme layer: maps the design tokens (tokens.css) onto Bootstrap and the .sr-* components.
 * Don't put colour values here; change tokens.css instead (docs/DESIGN.md).
 */

:root {
    /* Older names, kept as aliases so existing markup keeps working */
    --sr-border-radius: var(--sv-radius);
    --sr-card-shadow: var(--sv-shadow);
    --sr-primary-bg-light: var(--sv-color-primary-soft);
    --sr-input-bg: var(--sv-color-surface-sunken);

    /* Bootstrap 5.3 reads these, so .btn-primary, .text-primary, .bg-light etc. follow the brand */
    --bs-body-font-family: var(--sv-font-body);
    --bs-body-color: var(--sv-color-text);
    --bs-body-bg: var(--sv-color-page);
    --bs-emphasis-color: var(--sv-color-text);
    --bs-secondary-color: var(--sv-color-text-muted);
    --bs-border-color: var(--sv-color-border);
    --bs-border-radius: var(--sv-radius-sm);
    --bs-border-radius-lg: var(--sv-radius);
    --bs-heading-color: var(--sv-color-text);

    --bs-primary: var(--sv-color-primary);
    --bs-primary-rgb: var(--sv-color-primary-rgb);
    --bs-primary-bg-subtle: var(--sv-color-primary-soft);
    --bs-primary-border-subtle: var(--sv-sage);
    --bs-primary-text-emphasis: var(--sv-sage-ink);
    --bs-info-rgb: var(--sv-color-info-rgb);
    --bs-warning-rgb: var(--sv-color-warning-rgb);
    --bs-danger: var(--sv-color-danger);
    --bs-danger-rgb: var(--sv-color-danger-rgb);
    --bs-success-rgb: var(--sv-color-primary-rgb);

    /* alert-*, *-subtle and *-emphasis classes: the brand's notice tints (tokens.css), not Bootstrap's. */
    --bs-info-bg-subtle: var(--sv-color-info-soft);
    --bs-info-border-subtle: var(--sv-color-info-border);
    --bs-info-text-emphasis: var(--sv-color-info-text);
    --bs-success-bg-subtle: var(--sv-color-success-soft);
    --bs-success-border-subtle: var(--sv-color-success-border);
    --bs-success-text-emphasis: var(--sv-color-success-text);
    --bs-warning-bg-subtle: var(--sv-color-warning-soft);
    --bs-warning-border-subtle: var(--sv-color-warning-border);
    --bs-warning-text-emphasis: var(--sv-color-warning-text);
    --bs-danger-bg-subtle: var(--sv-color-danger-soft);
    --bs-danger-border-subtle: var(--sv-color-danger-border);
    --bs-danger-text-emphasis: var(--sv-color-danger-text);
    --bs-light-rgb: 247, 245, 240;      /* --sv-paper */
    --bs-secondary-bg: var(--sv-color-surface-sunken);
    --bs-tertiary-bg: var(--sv-color-surface);

    --bs-link-color: var(--sv-color-primary);
    --bs-link-color-rgb: var(--sv-color-primary-rgb);
    --bs-link-hover-color: var(--sv-color-primary-hover);
    --bs-focus-ring-color: var(--sv-color-focus-ring);
}

body {
    background-color: var(--sv-color-page);
    color: var(--sv-color-text);
    font-family: var(--sv-font-body);
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--sv-font-display);
    font-weight: var(--sv-heading-weight);
    letter-spacing: var(--sv-heading-tracking);
}

.btn-primary {
    --bs-btn-bg: var(--sv-color-primary);
    --bs-btn-border-color: var(--sv-color-primary);
    --bs-btn-color: var(--sv-color-on-primary);
    --bs-btn-hover-bg: var(--sv-color-primary-hover);
    --bs-btn-hover-border-color: var(--sv-color-primary-hover);
    --bs-btn-hover-color: var(--sv-color-on-primary);
    --bs-btn-active-bg: var(--sv-color-primary-hover);
    --bs-btn-active-border-color: var(--sv-color-primary-hover);
    --bs-btn-disabled-bg: var(--sv-color-primary);
    --bs-btn-disabled-border-color: var(--sv-color-primary);
    --bs-btn-focus-shadow-rgb: var(--sv-color-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--sv-color-primary);
    --bs-btn-border-color: var(--sv-color-primary);
    --bs-btn-hover-bg: var(--sv-color-primary);
    --bs-btn-hover-border-color: var(--sv-color-primary);
    --bs-btn-hover-color: var(--sv-color-on-primary);
    --bs-btn-active-bg: var(--sv-color-primary-hover);
    --bs-btn-active-border-color: var(--sv-color-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--sv-color-primary-rgb);
}

.btn-link {
    --bs-btn-color: var(--sv-color-primary);
    --bs-btn-hover-color: var(--sv-color-primary-hover);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--sv-sage);
    box-shadow: 0 0 0 0.2rem var(--sv-color-focus-ring);
}

.form-check-input:checked {
    background-color: var(--sv-color-primary);
    border-color: var(--sv-color-primary);
}

.form-control, .form-select {
    background-color: var(--sv-color-surface);
}

.card, .modal-content, .dropdown-menu, .list-group-item {
    --bs-card-bg: var(--sv-color-surface);
    --bs-modal-bg: var(--sv-color-surface);
    --bs-dropdown-bg: var(--sv-color-surface);
    --bs-list-group-bg: var(--sv-color-surface);
}

.sr-card {
    border-radius: var(--sr-border-radius);
    border: 1px solid var(--sv-color-border);
    box-shadow: var(--sr-card-shadow);
    background-color: var(--sv-color-surface);
    position: relative;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.sr-card-media {
    /* Shown behind card images, and as the cover when there's no image yet */
    background-color: var(--sv-sage);
}

.sr-card-clickable {
    cursor: pointer;
}

.sr-card-clickable:hover {
    transform: translateY(-5px);
    box-shadow: var(--sv-shadow-raised);
}

.sr-card-primary-indicator {
    border-inline-start: 4px solid var(--bs-primary);
}

.sr-card-header {
    background-color: transparent;
    border-bottom: none;
    padding: 1rem 1rem 0.5rem;
}

.sr-card-body {
    padding: 1rem;
}

.sr-badge-circle, .sr-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sr-border-radius);
    font-size: 0.9rem;
    padding: 0.1rem 0.3rem;
}

.sr-badge-circle {
    border-radius: 50%;
    width: 28px;
    height: 28px;
}

.sr-badge-primary-light {
    background-color: var(--sr-primary-bg-light);
    color: var(--bs-primary);
}

.sr-input-minimal {
    border: none;
    background-color: var(--sr-input-bg);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.sr-input-minimal:focus {
    background-color: var(--sr-input-bg);
    box-shadow: none;
    outline: none;
}

.sr-label-small {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sv-color-text-muted);
    margin-bottom: 0.25rem;
}

.sr-button-delete {
    width: 24px;
    height: 24px;
}

/* The dimmed page behind a hand-rolled modal (`modal fade show d-block`). */
.sr-modal-scrim {
    background: var(--sv-scrim);
    z-index: 1050;
}

/* A quiet delete: muted until hovered, so a list of cards isn't a column of red dots. */
.sr-delete-quiet {
    color: var(--sv-color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--sv-radius-pill);
}
.sr-delete-quiet:hover:not(:disabled),
.sr-delete-quiet:focus-visible {
    color: var(--sv-color-danger);
    background: var(--sv-color-surface-sunken);
}

/* Letter-spacing utilities. Single global definition — these used to be
   redeclared in several component <style> blocks with conflicting values,
   so the winner depended on which components happened to be rendered. */
.ls-1 {
    letter-spacing: 0.05em;
}

.ls-2 {
    letter-spacing: 0.1em;
}

/* Smaller-than-.small text. Used by several components but previously only
   defined inside CoverDesigner (0.75rem) and OverlayDetailsPanel (0.7rem),
   so which one applied depended on render order. */
.x-small {
    font-size: 0.75rem;
}

/* Notices: the brand's rounded corners and body font. Colours come from the --bs-*-subtle mapping above. */
.alert {
    --bs-alert-border-radius: var(--sv-radius-sm);
    font-family: var(--sv-font-body);
}

.alert .spinner-border {
    color: currentColor;
    flex-shrink: 0;
}