/* ─── Daybright Block Library — Global Component Styles ──────────────
 * Button colors sourced from Figma:
 *   Light mode: node 18:1009  Dark mode: node 25:926
 *
 * Light palette  — Winter 700: #005988 · Winter 600: #1E7CA4
 * Dark palette   — Winter 500: #1590C1 · Blue Sky 200: #9AD6F0 · Blue Sky 100: #CCEEFB
 * ─────────────────────────────────────────────────────────────────── */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  CONTAINER                                                       ║
   ╚══════════════════════════════════════════════════════════════════╝

   Single source of truth for block inner-container width + padding.
   Add .dbl-container to every block's __inner div — do NOT repeat
   max-width / margin-inline / padding-inline in block-level CSS.

   Breakpoints (matching --dbl-bp-* tokens):
     xs  < 480px  → 0.75rem padding
     sm  < 768px  → 1rem
     md  < 1024px → 1.5rem
     lg  ≥ 1024px → 2rem  (max-width 1200px kicks in here)
*/

/* Default: full width, smallest padding, no max-width clamp */
.dbl-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--dbl-container-px-xs, 0.75rem);
}

/* sm — 640px */
@media (min-width: 640px) {
    .dbl-container {
        max-width: 640px;
        padding-inline: var(--dbl-container-px-sm, 1rem);
    }
}

/* md — 768px */
@media (min-width: 768px) {
    .dbl-container {
        max-width: 768px;
    }
}

/* lg — 1024px */
@media (min-width: 1024px) {
    .dbl-container {
        max-width: 1024px;
        padding-inline: var(--dbl-container-px-lg, 1.5rem);
    }
}

/* xl — 1280px  (= wideSize) */
@media (min-width: 1280px) {
    .dbl-container {
        max-width: 1280px;
        padding-inline: var(--dbl-container-px, 2rem);
    }
}

/* 2xl — 1536px */
@media (min-width: 1536px) {
    .dbl-container {
        max-width: 1536px;
    }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  BUTTON COMPONENT                                                ║
   ╚══════════════════════════════════════════════════════════════════╝

   Variants:  primary | secondary | tertiary | ghost
   States:    default · :hover · :disabled / .is-disabled
   Themes:    (default light) | .dbl-btn--dark
   Sizes:     --sm | (default md) | --lg

   Auto dark context via CSS descendant selectors:
     .dbl-fwb  .dbl-hero  [data-theme="dark"]
*/

/* ── Base ─────────────────────────────────────────────────────────── */
.dbl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--dbl-font-family-base, 'Source Sans 3', sans-serif);
    font-size:   var(--dbl-btn-size,   1rem);
    font-weight: var(--dbl-btn-weight, 600);
    line-height: var(--dbl-btn-lh,     1.5rem);
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--dbl-border-radius, 30px);
    padding: 0.625rem 1.5rem;
    transition:
        background-color 0.2s ease,
        color            0.2s ease,
        border-color     0.2s ease;
    white-space: nowrap;
    width: fit-content;
}

.dbl-btn:focus-visible {
    outline: 3px solid var(--dbl-color-winter-700, #005988);
    outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE  (Figma 18:1009)
   Winter 700 (#005988) · Winter 600 (#1E7CA4) · Slate 500 (#64748B)
   ══════════════════════════════════════════════════════════════════ */

/* ── Primary
   Default:  bg #005988 (Winter 700), text White
   Hover:    bg #1E7CA4 (Winter 600), text White
   Disabled: bg #1E7CA4 @ 50%, text White
   ─────────────────────────────────────────────────────────────── */
.dbl-btn--primary {
    background-color: var(--dbl-color-winter-700, #005988);
    border-color:     var(--dbl-color-winter-700, #005988);
    color: #FFFFFF;
}
.dbl-btn--primary:hover {
    background-color: var(--dbl-color-winter-600, #1E7CA4);
    border-color:     var(--dbl-color-winter-600, #1E7CA4);
    color: #FFFFFF;
    text-decoration: none;
}
.dbl-btn--primary:disabled,
.dbl-btn--primary.is-disabled {
    background-color: var(--dbl-color-winter-600-50, rgba(30, 124, 164, 0.5));
    border-color:     var(--dbl-color-winter-600-50, rgba(30, 124, 164, 0.5));
    color: #FFFFFF;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Secondary
   Default:  border + text #005988 (Winter 700), bg transparent
   Hover:    border + text #1E7CA4 (Winter 600), bg transparent
   Disabled: border + text #1E7CA4 @ 50%
   ─────────────────────────────────────────────────────────────── */
.dbl-btn--secondary {
    background-color: transparent;
    border-color: var(--dbl-color-winter-700, #005988);
    color:        var(--dbl-color-winter-700, #005988);
}
.dbl-btn--secondary:hover {
    background-color: transparent;
    border-color: var(--dbl-color-winter-600, #1E7CA4);
    color:        var(--dbl-color-winter-600, #1E7CA4);
    text-decoration: none;
}
.dbl-btn--secondary:disabled,
.dbl-btn--secondary.is-disabled {
    border-color: var(--dbl-color-winter-600-50, rgba(30, 124, 164, 0.5));
    color:        var(--dbl-color-winter-600-50, rgba(30, 124, 164, 0.5));
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Tertiary
   Default:  border + text #64748B (Slate 500), bg transparent
   Hover:    border + text #64748B, bg #F1F5F9 (Slate 100)
   Disabled: border + text #64748B @ 50%
   ─────────────────────────────────────────────────────────────── */
.dbl-btn--tertiary {
    background-color: transparent;
    border-color: var(--dbl-color-slate-500, #64748B);
    color:        var(--dbl-color-slate-500, #64748B);
}
.dbl-btn--tertiary:hover {
    background-color: var(--dbl-color-slate-100, #F1F5F9);
    border-color: var(--dbl-color-slate-500, #64748B);
    color:        var(--dbl-color-slate-500, #64748B);
    text-decoration: none;
}
.dbl-btn--tertiary:disabled,
.dbl-btn--tertiary.is-disabled {
    background-color: transparent;
    border-color: var(--dbl-color-slate-500-50, rgba(100, 116, 139, 0.5));
    color:        var(--dbl-color-slate-500-50, rgba(100, 116, 139, 0.5));
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Ghost — inverted outline for light-bg accent sections */
.dbl-btn--ghost {
    background-color: transparent;
    border-color: var(--dbl-color-winter-700, #005988);
    color:        var(--dbl-color-winter-700, #005988);
}
.dbl-btn--ghost:hover {
    background-color: var(--dbl-color-winter-700, #005988);
    color: #FFFFFF;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE  (Figma 25:926)

   Applied via explicit .dbl-btn--dark modifier OR auto-applied
   inside: .dbl-fwb · .dbl-hero · [data-theme="dark"]
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   Dark — Primary
   Default:  bg #1590C1 (Winter 500), text White
   Hover:    bg #1C1C1C (dark canvas), text #005988 (Winter 700)
   Disabled: bg #1E7CA4 @ 50% (Winter 600), text White
   ───────────────────────────────────────────────────────────────── */
.dbl-btn--dark.dbl-btn--primary,
[data-theme="dark"] .dbl-btn--primary {
    background-color: var(--dbl-color-winter-500, #0086C4);
    border-color:     var(--dbl-color-winter-500, #0086C4);
    color: #FFFFFF;
}
.dbl-btn--dark.dbl-btn--primary:hover,
[data-theme="dark"] .dbl-btn--primary:hover {
    background-color: var(--dbl-color-dark-canvas, #1C1C1C);
    border-color:     var(--dbl-color-winter-500, #0086C4);
    color: var(--dbl-color-winter-700, #005988);
    text-decoration: none;
}
.dbl-btn--dark.dbl-btn--primary:disabled,
.dbl-btn--dark.dbl-btn--primary.is-disabled,
[data-theme="dark"] .dbl-btn--primary:disabled,
[data-theme="dark"] .dbl-btn--primary.is-disabled {
    background-color: var(--dbl-color-winter-600-50, rgba(30, 124, 164, 0.5));
    border-color:     var(--dbl-color-winter-600-50, rgba(30, 124, 164, 0.5));
    color: #FFFFFF;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────
   Dark — Secondary
   Default:  border + text #9AD6F0 (Blue Sky 200), bg transparent
   Hover:    border + text #CCEEFB (Blue Sky 100), bg transparent
   Disabled: border + text #CCEEFB @ 50%
   ───────────────────────────────────────────────────────────────── */
.dbl-btn--dark.dbl-btn--secondary,
.dbl-fwb .dbl-btn--secondary,
.dbl-hero .dbl-btn--secondary,
[data-theme="dark"] .dbl-btn--secondary {
    background-color: transparent;
    border-color: var(--dbl-color-blue-sky-200, #9AD6F0);
    color:        var(--dbl-color-blue-sky-200, #9AD6F0);
}
.dbl-btn--dark.dbl-btn--secondary:hover,
.dbl-fwb .dbl-btn--secondary:hover,
.dbl-hero .dbl-btn--secondary:hover,
[data-theme="dark"] .dbl-btn--secondary:hover {
    background-color: transparent;
    border-color: var(--dbl-color-blue-sky-100, #CCEEFB);
    color:        var(--dbl-color-blue-sky-100, #CCEEFB);
    text-decoration: none;
}
.dbl-btn--dark.dbl-btn--secondary:disabled,
.dbl-btn--dark.dbl-btn--secondary.is-disabled,
.dbl-fwb .dbl-btn--secondary:disabled,
.dbl-fwb .dbl-btn--secondary.is-disabled,
.dbl-hero .dbl-btn--secondary:disabled,
[data-theme="dark"] .dbl-btn--secondary:disabled,
[data-theme="dark"] .dbl-btn--secondary.is-disabled {
    background-color: transparent;
    border-color: var(--dbl-color-blue-sky-100-50, rgba(204, 238, 251, 0.5));
    color:        var(--dbl-color-blue-sky-100-50, rgba(204, 238, 251, 0.5));
    cursor: not-allowed;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────
   Dark — Tertiary
   Default:  border + text #55616C, bg transparent
   Hover:    border + text #55616C, bg #F1F5F9
   Disabled: border + text #55616C @ 50%
   ───────────────────────────────────────────────────────────────── */
.dbl-btn--dark.dbl-btn--tertiary,
.dbl-fwb .dbl-btn--tertiary,
.dbl-hero .dbl-btn--tertiary,
[data-theme="dark"] .dbl-btn--tertiary {
    background-color: transparent;
    border-color: var(--dbl-color-dark-tertiary, #55616C);
    color:        var(--dbl-color-dark-tertiary, #55616C);
}
.dbl-btn--dark.dbl-btn--tertiary:hover,
.dbl-fwb .dbl-btn--tertiary:hover,
.dbl-hero .dbl-btn--tertiary:hover,
[data-theme="dark"] .dbl-btn--tertiary:hover {
    background-color: var(--dbl-color-slate-100, #F1F5F9);
    border-color: var(--dbl-color-dark-tertiary, #55616C);
    color:        var(--dbl-color-dark-tertiary, #55616C);
    text-decoration: none;
}
.dbl-btn--dark.dbl-btn--tertiary:disabled,
.dbl-btn--dark.dbl-btn--tertiary.is-disabled,
.dbl-fwb .dbl-btn--tertiary:disabled,
.dbl-fwb .dbl-btn--tertiary.is-disabled,
.dbl-hero .dbl-btn--tertiary:disabled,
[data-theme="dark"] .dbl-btn--tertiary:disabled,
[data-theme="dark"] .dbl-btn--tertiary.is-disabled {
    background-color: transparent;
    border-color: var(--dbl-color-dark-tertiary-50, rgba(85, 97, 108, 0.5));
    color:        var(--dbl-color-dark-tertiary-50, rgba(85, 97, 108, 0.5));
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Dark — Ghost (outline only, same as dark secondary) ─────────── */
.dbl-btn--dark.dbl-btn--ghost,
.dbl-fwb .dbl-btn--ghost,
[data-theme="dark"] .dbl-btn--ghost {
    background-color: transparent;
    border-color: var(--dbl-color-blue-sky-200, #9AD6F0);
    color:        var(--dbl-color-blue-sky-200, #9AD6F0);
}
.dbl-btn--dark.dbl-btn--ghost:hover,
.dbl-fwb .dbl-btn--ghost:hover,
[data-theme="dark"] .dbl-btn--ghost:hover {
    border-color: var(--dbl-color-blue-sky-100, #CCEEFB);
    color:        var(--dbl-color-blue-sky-100, #CCEEFB);
}

/* ══════════════════════════════════════════════════════════════════
   SIZE VARIANTS
   ══════════════════════════════════════════════════════════════════ */

.dbl-btn--sm {
    font-size: var(--dbl-font-size-sm, 0.875rem);
    padding: 0.375rem 1rem;
}

.dbl-btn--lg {
    font-size: var(--dbl-font-size-lg, 1.25rem);
    padding: 0.875rem 2rem;
}

/* ══════════════════════════════════════════════════════════════════
   SHARED BLOCK VERTICAL SPACING UTILITIES
   Applied to block outer elements (section / div).
   "Default" (no class) keeps each block's own CSS as-is.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .dbl-space-m-sm { padding-top: 12px;  padding-bottom: 12px; }
    .dbl-space-m-md { padding-top: 20px;  padding-bottom: 20px; }
    .dbl-space-m-lg { padding-top: 32px;  padding-bottom: 32px; }
    .dbl-space-m-xl { padding-top: 48px;  padding-bottom: 48px; }
    .dbl-space-m-top-sm { padding-top: 12px; }
    .dbl-space-m-top-md { padding-top: 20px; }
    .dbl-space-m-top-lg { padding-top: 32px; }
    .dbl-space-m-top-xl { padding-top: 48px; }
    .dbl-space-m-bot-sm { padding-bottom: 12px; }
    .dbl-space-m-bot-md { padding-bottom: 20px; }
    .dbl-space-m-bot-lg { padding-bottom: 32px; }
    .dbl-space-m-bot-xl { padding-bottom: 48px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .dbl-space-t-sm { padding-top: 16px;  padding-bottom: 16px; }
    .dbl-space-t-md { padding-top: 24px;  padding-bottom: 24px; }
    .dbl-space-t-lg { padding-top: 40px;  padding-bottom: 40px; }
    .dbl-space-t-xl { padding-top: 56px;  padding-bottom: 56px; }
    .dbl-space-t-top-sm { padding-top: 16px; }
    .dbl-space-t-top-md { padding-top: 24px; }
    .dbl-space-t-top-lg { padding-top: 40px; }
    .dbl-space-t-top-xl { padding-top: 56px; }
    .dbl-space-t-bot-sm { padding-bottom: 16px; }
    .dbl-space-t-bot-md { padding-bottom: 24px; }
    .dbl-space-t-bot-lg { padding-bottom: 40px; }
    .dbl-space-t-bot-xl { padding-bottom: 56px; }
}

@media (min-width: 1024px) {
    .dbl-space-d-sm { padding-top: 24px;  padding-bottom: 24px; }
    .dbl-space-d-md { padding-top: 40px;  padding-bottom: 40px; }
    .dbl-space-d-lg { padding-top: 56px;  padding-bottom: 56px; }
    .dbl-space-d-xl { padding-top: 80px;  padding-bottom: 80px; }
    .dbl-space-d-top-sm { padding-top: 24px; }
    .dbl-space-d-top-md { padding-top: 40px; }
    .dbl-space-d-top-lg { padding-top: 56px; }
    .dbl-space-d-top-xl { padding-top: 80px; }
    .dbl-space-d-bot-sm { padding-bottom: 24px; }
    .dbl-space-d-bot-md { padding-bottom: 40px; }
    .dbl-space-d-bot-lg { padding-bottom: 56px; }
    .dbl-space-d-bot-xl { padding-bottom: 80px; }
}

/* ══════════════════════════════════════════════════════════════════
   SHARED BLOCK BACKGROUND UTILITIES
   Applied to fullwidth outer wrappers (container-wrap, section, etc.)
   ══════════════════════════════════════════════════════════════════ */

.dbl-bg-white { background-color: #ffffff; }
.dbl-bg-light { background-color: #EDF4F9; }
.dbl-bg-dark  { background-color: #1E1E1E; }