/* Fonts are self-hosted in fonts.css, imported before this file: no third-party CDN (GDPR). */

/* Light theme, the fallback a tenant with no stored theme renders with: the
   ThemeCompiler overrides every token per tenant, and ThemeTokenContractTest fails
   the build if the two sets drift. Hover always steps away from the surface (ADR-0005). */
:root,
[data-bs-theme='light'] {
    --ap-bg: #f7f5f0;
    --ap-bg-rgb: 247, 245, 240;
    --ap-panel: #ffffff;
    --ap-border: #e2ddd0;
    --ap-text: #201e1d;
    --ap-muted: #4a463c;
    --ap-faint: #6b6659;
    --ap-accent: #c8a24a;
    --ap-accent-rgb: 200, 162, 74;
    --ap-accent-strong: #e3c87c;
    --ap-accent-text: #7c6425;
    --ap-accent-text-hover: #523e00;
    --ap-accent-contrast: #0a0a0b;
}

[data-bs-theme='dark'] {
    --ap-bg: #17171b;
    --ap-bg-rgb: 23, 23, 27;
    --ap-panel: #1f1f24;
    --ap-border: #313139;
    --ap-text: #edeae3;
    --ap-muted: #b6b2a9;
    --ap-faint: #8a8781;
    --ap-accent: #c8a24a;
    --ap-accent-rgb: 200, 162, 74;
    --ap-accent-strong: #e3c87c;
    --ap-accent-text: #c8a24a;
    --ap-accent-text-hover: #e3c87c;
    --ap-accent-contrast: #0a0a0b;
}

/* Map the shared tokens onto Bootstrap for both themes. */
:root {
    /* Typography, spacing and shape defaults; the ThemeCompiler overrides them per tenant. */
    --ap-font-display: 'Archivo', system-ui, sans-serif;
    --ap-font-body: 'Archivo', system-ui, sans-serif;
    --ap-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --ap-font-ui: 'IBM Plex Mono', ui-monospace, monospace;
    --ap-ui-scale: 1;
    --ap-ui-tracking: 1;
    --ap-ui-transform: uppercase;
    --ap-radius: 0;
    --ap-radius-button: 0;
    --ap-layout-max: none;
    --ap-title-transform: uppercase;
    --ap-space-section: 6.5rem;
    --ap-space-block: calc(var(--ap-space-section) / 2);
    --ap-space-tight: 1.25rem;

    --bs-primary: var(--ap-accent);
    --bs-primary-rgb: var(--ap-accent-rgb);
    --bs-body-font-family: var(--ap-font-body);
    --bs-font-monospace: var(--ap-font-mono);
}

/* Every public wrapper is a .container-fluid, so the theme's layout width caps
   them all at once while section backgrounds, hero media and the chrome bars
   stay edge to edge (ADR-0005). Bootstrap already centers the class. */
.container-fluid {
    max-width: var(--ap-layout-max);
}

/* :root too: a visitor without JS on a two-scheme site has no data-bs-theme at all. */
:root,
[data-bs-theme='light'],
[data-bs-theme='dark'] {
    --bs-body-bg: var(--ap-bg);
    --bs-body-bg-rgb: var(--ap-bg-rgb);
    --bs-body-color: var(--ap-text);
    --bs-border-color: var(--ap-border);
    --bs-emphasis-color: var(--ap-text);
    --bs-secondary-color: var(--ap-muted);
    --bs-secondary-bg: color-mix(in srgb, var(--ap-text) 5%, var(--ap-bg));
    --bs-tertiary-bg: color-mix(in srgb, var(--ap-text) 3%, var(--ap-bg));
    --bs-link-color: var(--ap-accent-text);
    --bs-link-hover-color: var(--ap-accent-text-hover);

    /* One radius for every Bootstrap component: .form-control, .card, .alert,
       .dropdown-menu, .accordion and .toast all read --bs-border-radius, so a
       tenant's shape reaches them without a rule per component. The button
       scale is its own token (--ap-radius-button, set on .btn-accent). */
    --bs-border-radius: var(--ap-radius);
    --bs-border-radius-sm: var(--ap-radius);
    --bs-border-radius-lg: var(--ap-radius);
}

a {
    color: var(--ap-accent-text);
    text-decoration: none;
}

a:hover {
    color: var(--ap-accent-text-hover);
}

.text-muted-ap {
    color: var(--ap-muted);
}

.text-faint {
    color: var(--ap-faint);
}

.text-accent {
    color: var(--ap-accent-text);
}

/* Bootstrap ships no min-width utility; a flex child needs it to let a
   .text-truncate descendant shrink instead of overflowing the row. */
.min-w-0 {
    min-width: 0;
}

.eyebrow {
    font-family: var(--ap-font-ui);
    font-size: calc(0.625rem * var(--ap-ui-scale));
    font-weight: 500;
    letter-spacing: calc(0.24em * var(--ap-ui-tracking));
    text-transform: var(--ap-ui-transform);
    color: var(--ap-accent-text);
}

/* Every boxed block surface is a Bootstrap .card: .card-body owns the padding,
   --bs-border-radius the corner. The card reads its own --bs-card-* rather than
   the page's variables, so the modifiers below only re-point those and, on the
   two filled surfaces, the --ap-* tokens the text inside reads. */
.card {
    --bs-card-bg: color-mix(in srgb, var(--ap-text) 5%, var(--ap-bg));
    --bs-card-border-width: 0;
    --bs-card-border-color: var(--ap-border);
    --bs-card-color: var(--ap-text);
    --bs-card-title-color: var(--ap-text);
    --bs-card-subtitle-color: var(--ap-muted);
    --bs-card-title-spacer-y: 0.35rem;
    --bs-card-spacer-x: 1.75rem;
    --bs-card-spacer-y: 1.75rem;
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-x: var(--bs-card-spacer-x);
    --bs-card-cap-padding-y: 1.25rem;
}

.card-lg {
    --bs-card-spacer-x: clamp(1.5rem, 4vw, 3.5rem);
    --bs-card-spacer-y: clamp(1.75rem, 4vw, 3.5rem);
}

/* Laid over a photo or a map: lifted rather than tinted. */
.card-raised {
    --bs-card-bg: var(--ap-panel);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--ap-text) 6%, transparent),
        0 0.75rem 2rem -0.75rem color-mix(in srgb, var(--ap-text) 22%, transparent);
}

/* No accent token is measured against the inverted pair (ADR-0005), so the
   derived tokens are re-pointed at it for the whole subtree. */
.card-ink,
.ink-surface,
.stats-band,
.hero-encre,
.blk--ink,
.price-compare__on {
    --ap-muted: color-mix(in srgb, var(--ap-bg) 78%, var(--ap-text));
    --ap-faint: color-mix(in srgb, var(--ap-bg) 64%, var(--ap-text));
    --ap-border: color-mix(in srgb, var(--ap-bg) 22%, var(--ap-text));
    --ap-accent-text: var(--ap-bg);
    --ap-accent-text-hover: var(--ap-bg);
    --bs-border-color: var(--ap-border);
    --bs-link-color: var(--ap-accent-text);
    --bs-link-hover-color: var(--ap-accent-text-hover);
}

.card-ink {
    --bs-card-bg: var(--ap-text);
    --bs-card-color: var(--ap-bg);
    --bs-card-title-color: var(--ap-bg);
    --bs-card-subtitle-color: var(--ap-muted);
}

/* Only --ap-accent-contrast is measured against the accent fill (ADR-0005). */
.card-accent {
    --ap-muted: var(--ap-accent-contrast);
    --ap-faint: var(--ap-accent-contrast);
    --ap-border: color-mix(in srgb, var(--ap-accent-contrast) 22%, var(--ap-accent));
    --ap-accent-text: var(--ap-accent-contrast);
    --ap-accent-text-hover: var(--ap-accent-contrast);
    --bs-border-color: var(--ap-border);
    --bs-link-color: var(--ap-accent-text);
    --bs-link-hover-color: var(--ap-accent-text-hover);
    --bs-card-bg: var(--ap-accent);
    --bs-card-color: var(--ap-accent-contrast);
    --bs-card-title-color: var(--ap-accent-contrast);
    --bs-card-subtitle-color: var(--ap-accent-contrast);
}

/* The highlighted one in a row: a ring outside the box, so it works on any surface. */
.card-on {
    box-shadow: 0 0 0 2px var(--ap-accent);
}

/* A card that is one link. Not .card-link: Bootstrap owns that name. */
.card-action,
.card-action:hover {
    color: var(--bs-card-color);
}

.card-action {
    transition: background-color 0.15s ease;
}

.card-action:hover {
    --bs-card-bg: color-mix(in srgb, var(--ap-text) 9%, var(--ap-bg));
}

.card-img-top .image-frame,
.card-img-top .site-image {
    border: 0;
    border-radius: 0;
}

/* One voice for both fills: the font pair's small type inside generous padding. The
   compound .btn-sm rule exists because these single-class vars out-cascade
   Bootstrap's .btn-sm, which is declared earlier at the same specificity. */
.btn-accent,
.btn-outline-accent {
    --bs-btn-padding-x: 1.625rem;
    --bs-btn-padding-y: 1rem;
    --bs-btn-font-size: calc(0.72rem * var(--ap-ui-scale));
    --bs-btn-line-height: 1.25;
    --bs-btn-font-family: var(--ap-font-ui);
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: var(--ap-radius-button);
    letter-spacing: calc(0.12em * var(--ap-ui-tracking));
    text-transform: var(--ap-ui-transform);
}

.btn-accent.btn-sm,
.btn-outline-accent.btn-sm {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-font-size: calc(0.64rem * var(--ap-ui-scale));
    --bs-btn-border-radius: var(--ap-radius-button);
}

.btn-accent {
    --bs-btn-bg: var(--ap-accent);
    --bs-btn-border-color: var(--ap-accent);
    --bs-btn-color: var(--ap-accent-contrast);
    --bs-btn-hover-bg: var(--ap-accent-strong);
    --bs-btn-hover-border-color: var(--ap-accent-strong);
    --bs-btn-hover-color: var(--ap-accent-contrast);
    --bs-btn-active-bg: var(--ap-accent-strong);
    --bs-btn-active-border-color: var(--ap-accent-strong);
}

/* On the accent fill the accent button would vanish: it inverts onto the contrast ink. */
.card-accent .btn-accent {
    --bs-btn-bg: var(--ap-accent-contrast);
    --bs-btn-border-color: var(--ap-accent-contrast);
    --bs-btn-color: var(--ap-accent);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--ap-accent-contrast);
    --bs-btn-hover-color: var(--ap-accent-contrast);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--ap-accent-contrast);
    --bs-btn-active-color: var(--ap-accent-contrast);
}

.btn-outline-accent {
    --bs-btn-color: var(--ap-text);
    --bs-btn-border-color: var(--ap-border);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: var(--ap-accent-text);
    --bs-btn-hover-border-color: var(--ap-accent);
    --bs-btn-active-bg: var(--ap-accent);
    --bs-btn-active-color: var(--ap-accent-contrast);
    --bs-btn-active-border-color: var(--ap-accent);
}

.pagination {
    --bs-pagination-color: var(--ap-text);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: var(--ap-border);
    --bs-pagination-hover-color: var(--ap-accent-text);
    --bs-pagination-hover-bg: transparent;
    --bs-pagination-hover-border-color: var(--ap-accent);
    --bs-pagination-focus-color: var(--ap-accent-text);
    --bs-pagination-focus-bg: transparent;
    --bs-pagination-active-bg: var(--ap-accent);
    --bs-pagination-active-color: var(--ap-accent-contrast);
    --bs-pagination-active-border-color: var(--ap-accent);
    --bs-pagination-disabled-color: var(--ap-muted);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: var(--ap-border);
    font-family: var(--ap-font-mono);
}

.pagination .page-link {
    border-radius: var(--ap-radius);
}

/* The keyboard's first stop on every public page: hidden until focused, then on top of
   the navigation, so a screen reader or a Tab press can jump past the menu. */
.skip-link:focus {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2000;
    padding: 0.6rem 1rem;
    background-color: var(--ap-bg);
    color: var(--ap-text);
    border: 2px solid var(--ap-accent);
    border-radius: var(--ap-radius);
}