/* ==========================================================================
   DTL redesign — design tokens + shared primitives (Horizone-informed)
   Layer 0 of the override cascade. Load order: after base styles in every
   page; per-page overlays (redesign-*.css) always come after this file.
   ========================================================================== */

:root {
    /* ink & text */
    --dtl-ink: #101010;
    --dtl-ink-2: #2b2b2b;
    --dtl-body: #3a3a3a;
    --dtl-muted: #666666;
    --dtl-grey: #767676;
    --dtl-grey-2: #9a9a9a;

    /* surfaces & lines */
    --dtl-line: #e7e7e7;
    --dtl-line-2: #f0f0f0;
    --dtl-card: #ffffff;
    --dtl-card-line: #ebecec;
    --dtl-surface: #fafafa;
    --dtl-surface-2: #f5f5f5;

    /* Dark controls only; page canvases remain white and neutral. */
    --dtl-dark: #101010;
    --dtl-dark-2: #1a1a1a;
    --dtl-dark-3: #252525;
    --dtl-dark-line: rgba(255, 255, 255, 0.12);
    --dtl-dark-text: #ffffff;
    --dtl-dark-muted: #d9e9df;

    /* brand accent (kept from DTL) */
    --dtl-green: #2a724a;
    --dtl-green-dark: #205b3b;
    --dtl-green-deep: #1e5134;
    --dtl-green-soft: rgba(42, 114, 74, 0.14);
    --dtl-green-pale: #eef4ef;
    --dtl-green-pale-2: #e0ece4;

    /* commerce accents (kept from DTL) */
    --dtl-price: #d61706;
    --dtl-price-soft: rgba(214, 23, 6, 0.08);
    --dtl-old: #767676;
    --dtl-orange: #fd6e1d;
    --dtl-orange-deep: #b45309;
    --dtl-yellow: #f0b323;

    /* geometry */
    --dtl-radius-s: 6px;
    --dtl-radius-m: 12px;
    --dtl-radius-l: 16px;
    --dtl-radius-pill: 999px;

    /* elevation */
    --dtl-shadow-s: 0 1px 2px rgba(16, 16, 16, 0.05);
    --dtl-shadow-m: 0 2px 6px rgba(16, 16, 16, 0.05), 0 10px 24px -12px rgba(16, 16, 16, 0.08);
    --dtl-shadow-l: 0 8px 20px -6px rgba(16, 16, 16, 0.08), 0 20px 44px -18px rgba(31, 102, 68, 0.14);

    --dtl-font: 'Inter', 'IBM Plex Sans', 'Roboto', sans-serif;

    /* legacy aliases so untouched rules keep their palette */
    --header-green: var(--dtl-green);
    --header-green-dark: var(--dtl-green-dark);
}

/* Inter first, existing IBM Plex Sans / Roboto remain fallbacks */
html {
    --page-font: var(--dtl-font);
}

body,
body button,
body input,
body select,
body textarea,
.dtl-site-header,
.dtl-site-footer,
button[type="submit"] {
    font-family: var(--dtl-font);
    letter-spacing: -0.02em;
}

h1, h2, h3, .p-name h3,
.dtl-section h2, .dtl-footer-heading {
    letter-spacing: -0.03em;
}

::selection {
    background: var(--dtl-green);
    color: #fff;
}

/* ---------- shared section helpers (consumed by overlays) ---------- */

.dtl-arrow {display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.12em;}

.dtl-section {
    margin-top: 48px;
}

.dtl-section > .dtl-head,
.dtl-section > .dtl-eyebrow + .dtl-eyebrow-title {
    margin-bottom: 18px;
}

.dtl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--dtl-radius-pill);
    background: var(--dtl-green-pale);
    color: var(--dtl-green-dark);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.dtl-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dtl-orange);
}

/* focus ring for interactive controls (input, select, a, button) */
.dtl-site-header input:focus-visible,
.dtl-site-footer a:focus-visible,
main a:focus-visible,
main button:focus-visible,
main input:focus-visible,
main select:focus-visible,
main textarea:focus-visible {
    outline: 2px solid var(--dtl-green);
    outline-offset: 3px;
}

/* thin scrollbar for overlays & rails */
.dtl-catalog-panels ::-webkit-scrollbar,
main ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dtl-catalog-panels ::-webkit-scrollbar-thumb,
main ::-webkit-scrollbar-thumb {
    border-radius: var(--dtl-radius-pill);
    background: #d3d3d3;
}

/* generic card hover lift (opt-in via .dtl-card class in overlays) */
.dtl-card {
    background: var(--dtl-card);
    border: 1px solid var(--dtl-card-line);
    border-radius: var(--dtl-radius-m);
    box-shadow: var(--dtl-shadow-s);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.dtl-card:hover {
    border-color: #c4d6cb;
    box-shadow: var(--dtl-shadow-l);
    transform: translateY(-2px);
}

/* utility headings for banners/blocks markup that ships without styles */
.dtl-h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--dtl-ink);
    letter-spacing: -0.03em;
}

.dtl-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.dtl-skip {position:fixed;z-index:1100;top:8px;left:16px;padding:12px 18px;background:#fff;color:var(--dtl-green-dark);border:2px solid var(--dtl-green);border-radius:8px;transform:translateY(-160%);}
.dtl-skip:focus {transform:none;}