/* Daybright — Design Tokens
 * Source: Figma Design System node 2:619
 * Font: Source Sans 3 (Google Fonts)
 */
:root {

    /* ─── Brand Colors ─────────────────────────────────────────── */
    --dbl-color-brand-primary:      #0086C4;
    --dbl-color-brand-secondary:    #FF6B35;
    --dbl-color-brand-base:         #FFFFFF;

    /* ─── Winter Palette (button system — from Figma 18:1009 / 25:926) ─ */
    --dbl-color-winter-700:         #005988;   /* HSL 201, 100%, 27% — light btn primary default   */
    --dbl-color-winter-600:         #1E7CA4;   /* HSL 198,  69%, 38% — light btn primary hover     */
    --dbl-color-winter-500:         #0086C4;   /* HSL 197,  80%, 42% — dark btn primary default    */
    --dbl-color-winter-600-50:      rgba(30, 124, 164, 0.5);   /* Winter 600 @ 50% — light disabled */
    --dbl-color-slate-500-50:       rgba(100, 116, 139, 0.5);  /* Slate 500 @ 50% — tertiary disabled */

    /* ─── Blue Sky Palette (dark mode secondary buttons) ─────────── */
    --dbl-color-blue-sky-200:       #9AD6F0;   /* HSL 198,  74%, 77% — dark secondary default */
    --dbl-color-blue-sky-100:       #CCEEFB;   /* HSL 197,  85%, 89% — dark secondary hover   */
    --dbl-color-blue-sky-100-50:    rgba(204, 238, 251, 0.5);  /* Blue Sky 100 @ 50% — disabled */

    /* ─── Dark Mode Specific ─────────────────────────────────────── */
    --dbl-color-dark-canvas:        #1C1C1C;   /* Dark mode canvas / btn primary hover bg      */
    --dbl-color-dark-tertiary:      #55616C;   /* HSL 209,  12%, 38% — dark tertiary text/border */
    --dbl-color-dark-tertiary-50:   rgba(85, 97, 108, 0.5);   /* dark tertiary @ 50% — disabled */

    /* ─── Slate Scale (Figma "winter" palette — Tailwind slate) ── */
    --dbl-color-slate-50:           #F8FAFC;
    --dbl-color-slate-100:          #F1F5F9;
    --dbl-color-slate-200:          #E2E8F0;
    --dbl-color-slate-300:          #CBD5E1;   /* Hero default bg */
    --dbl-color-slate-400:          #94A3B8;   /* Muted elements   */
    --dbl-color-slate-500:          #64748B;
    --dbl-color-slate-600:          #475569;   /* Hero eyebrow     */
    --dbl-color-slate-700:          #334155;
    --dbl-color-slate-800:          #1E293B;
    --dbl-color-slate-900:          #0F172A;

    /* ─── Semantic / UI Colors ──────────────────────────────────── */
    --dbl-color-top-header:         #F4F4F4;   /* Top header bg from Figma Header Section */
    --dbl-color-section-bg:         #EDF4F9;   /* Section bg from Figma Text Section */
    --dbl-color-section-purple:     rgba(238, 219, 250, 0.50); /* Soft lavender option */
    --dbl-color-section-blue-circle: rgba(34, 144, 187, 0.10); /* Light blue circle bg (#2290BB @10%) */
    --dbl-color-circle-ring:          rgba(34, 144, 187, 0.18); /* Ring decoration, slightly more opaque */
    --dbl-color-neutral-100:        #F5F5F5;
    --dbl-color-neutral-200:        #E5E5E5;
    --dbl-color-neutral-900:        #1A1A1A;
    --dbl-color-text-default:       #3A3A3A;   /* Body text per Figma typography section */
    --dbl-color-text-muted:         #6B7280;
    --dbl-color-text-inverted:      #FFFFFF;
    --dbl-color-footer-bg:          #F7F7F7;
    --dbl-footer-color-default:     #564E3C;   /* Footer text per Figma footer section */
    --dbl-footer-color-heading:     #00629f;   /* Muted footer text */
    --dbl-footer-color-link-hover:  #00a9eb;   /* Footer link color (same as heading) */
    /* ─── Typography ────────────────────────────────────────────── */
    --dbl-font-family-base:         'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --dbl-font-family-heading:      'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --dbl-font-family-mono:         'JetBrains Mono', 'Courier New', monospace;

    /* ─── Font Sizes (from Figma text node measurements) ────────── */
    --dbl-font-size-sm:             0.875rem;  /* 14px — captions, labels   */
    --dbl-font-size-base:           1rem;      /* 16px — Body/Default       */
    --dbl-font-size-lg:             1.25rem;   /* 20px — Section/H4         */
    --dbl-font-size-xl:             1.5rem;    /* 24px — Section/H3, Hero/Lead, Hero/Eyebrow */
    --dbl-font-size-2xl:            2rem;      /* 32px — Section/H2         */
    --dbl-font-size-3xl:            2.875rem;  /* 46px — Hero/H1            */
    --dbl-font-size-4xl:            3.75rem;   /* 60px — Display            */

    /* ─── Typography Style Tokens (source: Figma node 1:11) ───────── */

    /* Hero / Eyebrow — 24/32, w600, UPPERCASE */
    --dbl-hero-eyebrow-size:        var(--dbl-font-size-xl);   /* 24px */
    --dbl-hero-eyebrow-weight:      600;
    --dbl-hero-eyebrow-lh:          2rem;                      /* 32px */
    --dbl-hero-eyebrow-transform:   uppercase;
    --dbl-hero-eyebrow-ls:          0em;

    /* Hero / Heading (H1) — 46/56, w600 */
    --dbl-hero-h1-size:             var(--dbl-font-size-3xl);  /* 46px */
    --dbl-hero-h1-weight:           600;
    --dbl-hero-h1-lh:               3.5rem;                    /* 56px */
    --dbl-hero-h1-ls:               0em;

    /* Hero / Lead — 24/32, w400 */
    --dbl-hero-lead-size:           var(--dbl-font-size-xl);   /* 24px */
    --dbl-hero-lead-weight:         400;
    --dbl-hero-lead-lh:             2rem;                      /* 32px */

    /* Section / Eyebrow — 16/32, w700, UPPERCASE */
    --dbl-eyebrow-size:             var(--dbl-font-size-base); /* 16px */
    --dbl-eyebrow-weight:           700;
    --dbl-eyebrow-lh:               2rem;                      /* 32px */
    --dbl-eyebrow-transform:        uppercase;
    --dbl-eyebrow-ls:               0.08em;

    /* Section / Heading (H2) — 32/36, w600 */
    --dbl-h2-size:                  var(--dbl-font-size-2xl);  /* 32px */
    --dbl-h2-weight:                600;
    --dbl-h2-lh:                    2.25rem;                   /* 36px */
    --dbl-h2-ls:                    0em;

    /* Section / Heading (H3) — 24/32, w600 */
    --dbl-h3-size:                  var(--dbl-font-size-xl);   /* 24px */
    --dbl-h3-weight:                600;
    --dbl-h3-lh:                    2rem;                      /* 32px */
    --dbl-h3-ls:                    0em;

    /* Section / Heading (H4) — 20/28, w600, ls -0.1px */
    --dbl-h4-size:                  var(--dbl-font-size-lg);   /* 20px */
    --dbl-h4-weight:                600;
    --dbl-h4-lh:                    1.75rem;                   /* 28px */
    --dbl-h4-ls:                    -0.1px;                    /* Figma: ls -0.1 */

    /* Body / Default — 16/24, w400 */
    --dbl-body-size:                var(--dbl-font-size-base); /* 16px */
    --dbl-body-weight:              400;
    --dbl-body-lh:                  1.5rem;                    /* 24px */

    /* Button / Primary — 16/24, w600 */
    --dbl-btn-size:                 var(--dbl-font-size-base); /* 16px */
    --dbl-btn-weight:               600;
    --dbl-btn-lh:                   1.5rem;                    /* 24px */

    /* ─── Spacing ────────────────────────────────────────────────── */
    --dbl-spacing-xs:               0.25rem;   /*  4px */
    --dbl-spacing-sm:               0.5rem;    /*  8px */
    --dbl-spacing-md:               1rem;      /* 16px */
    --dbl-spacing-lg:               2rem;      /* 32px */
    --dbl-spacing-xl:               4rem;      /* 64px */
    --dbl-spacing-2xl:              6rem;      /* 96px */
    --dbl-spacing-3xl:              8rem;      /* 128px */

    /* ─── Layout ─────────────────────────────────────────────────── */
    --dbl-content-width:            760px;
    --dbl-wide-width:               1280px;  /* = --dbl-bp-xl */
    --dbl-border-radius:            30px;
    --dbl-border-radius-md:         24px;
    --dbl-border-radius-sm:         15px;
    --dbl-border-radius-card:       8px;    /* Figma: content cards (e.g. fullwidth-banner card) */

    /* ─── Breakpoints — Tailwind-aligned (JS/ref only, not usable in @media) ─ */
    --dbl-bp-sm:                    640px;   /* Tailwind sm  */
    --dbl-bp-md:                    768px;   /* Tailwind md  */
    --dbl-bp-lg:                    1024px;  /* Tailwind lg  */
    --dbl-bp-xl:                    1280px;  /* Tailwind xl  = wideSize */
    --dbl-bp-2xl:                   1536px;  /* Tailwind 2xl */

    /* ─── Container padding per breakpoint ──────────────────────── */
    --dbl-container-px:             2rem;    /* xl / 2xl  (32px) */
    --dbl-container-px-lg:          1.5rem;  /* lg        (24px) */
    --dbl-container-px-sm:          1rem;    /* sm / md   (16px) */
    --dbl-container-px-xs:          0.75rem; /* < sm      (12px) */

    /* ─── Section vertical padding ──────────────────────────────── */
    --dbl-section-py:               5rem;    /* ≥ 1024px  (80px) */
    --dbl-section-py-md:            3.75rem; /* ≥ 768px   (60px) */
    --dbl-section-py-sm:            2.5rem;  /* < 768px   (40px) */

    /* ─── Grid column gap ────────────────────────────────────────── */
    --dbl-grid-gap:                 3rem;    /* ≥ 1024px  (48px) */
    --dbl-grid-gap-md:              2rem;    /* ≥ 768px   (32px) */
    --dbl-grid-gap-sm:              1.5rem;  /* < 768px   (24px) */
}