/* ==========================================================================
   Libo Energy — Design Tokens
   All values derived from design.md §2 (Color), §3 (Type), §4 (Layout).
   No invented colors. Single source of truth for the design system.
   ========================================================================== */

:root {
  /* ---- Primary palette (logo-derived) ---------------------------------- */
  --lb-red:            #D6261C; /* Libo Energy Red — CTAs, active, accents   */
  --lb-red-dark:       #A81B14; /* Ember Red — hover/pressed                 */
  --lb-red-light:      #EF4B3C; /* Flare Red — tints, gradient stop          */

  --lb-royal:          #1F4C8C; /* Royal Blue — secondary buttons, links     */
  --lb-navy:           #0E2A52; /* Midnight Navy — dark section background    */
  --lb-carbon:         #0A1E3D; /* Carbon Navy — footer, deepest surfaces     */

  --lb-cyan:           #0288CC; /* Azure Cyan — icons, focus rings, data viz  */
  --lb-cyan-light:     #2BA6E8; /* Sky Azure — subtle hovers, gradient blend  */

  /* ---- Signature gradients --------------------------------------------- */
  --lb-energy-gradient: linear-gradient(135deg, #D6261C 0%, #EE5A24 100%);
  --lb-depth-gradient:  linear-gradient(180deg, #0E2A52 0%, #1F4C8C 100%);

  /* ---- Neutrals --------------------------------------------------------- */
  --lb-white:          #FFFFFF;
  --lb-mist:           #F4F6F9; /* light section alt background              */
  --lb-cloud:          #EAEEF3; /* subtle panels, hover fills on light       */
  --lb-line:           #DCE3EC; /* borders, dividers, card outlines          */
  --lb-steel:          #94A3B8; /* disabled, captions, muted icons           */
  --lb-slate:          #5A6B82; /* secondary text on light                   */

  /* ---- Text colors ------------------------------------------------------ */
  --lb-text-heading:   #0E2A52; /* headings on light                         */
  --lb-text-body:      #334155; /* body on light                             */
  --lb-text-muted:     #5A6B82; /* muted / captions on light                 */
  --lb-text-on-dark:   #FFFFFF; /* headings on dark                          */
  --lb-text-body-dark: #C7D3E3; /* body on dark                              */
  --lb-eyebrow:        #D6261C; /* eyebrow / section label                   */

  /* ---- Type families (§3) ---------------------------------------------- */
  --lb-font-head: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --lb-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ---- Type scale (desktop) — §3 --------------------------------------- */
  --fs-display:   3.5rem;  /* 56px (56–64) Hero H1                           */
  --fs-h1:        2.75rem; /* 44px                                          */
  --fs-h2:        2.25rem; /* 36px                                          */
  --fs-h3:        1.5rem;  /* 24px                                          */
  --fs-h4:        1.25rem; /* 20px                                          */
  --fs-eyebrow:   0.875rem;/* 14px                                          */
  --fs-lead:      1.125rem;/* 18px                                          */
  --fs-body:      1rem;    /* 16px                                          */
  --fs-small:     0.8125rem;/* 13px                                         */
  --fs-button:    0.9375rem;/* 15px                                         */
  --fs-stat:      3.5rem;  /* 56px (48–64)                                  */

  /* line heights */
  --lh-display: 1.1;
  --lh-h1:      1.15;
  --lh-h2:      1.2;
  --lh-h3:      1.3;
  --lh-h4:      1.35;
  --lh-lead:    1.6;
  --lh-body:    1.7;
  --lh-caption: 1.5;

  /* weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Spacing scale (8px base) — §4 ----------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* section vertical rhythm */
  --section-pad:        96px; /* desktop                                    */
  --container-pad-x:    24px; /* desktop side padding                       */
  --grid-gutter:        24px;

  /* ---- Layout ----------------------------------------------------------- */
  --lb-max-width:    1200px;
  --lb-max-width-xl: 1320px;
  --lb-reading:      760px;

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm:  8px;  /* buttons, inputs                                     */
  --radius-md:  12px; /* cards                                              */
  --radius-lg:  16px; /* modals                                            */

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-sm:  0 1px 3px rgba(14, 42, 82, 0.08);
  --shadow-md:  0 8px 24px rgba(14, 42, 82, 0.10);
  --shadow-lg:  0 16px 48px rgba(14, 42, 82, 0.16);

  /* ---- Motion (§8) ------------------------------------------------------ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   200ms;
  --dur-mid:    400ms;
  --dur-slow:   600ms;

  /* ---- Focus ring (§7, §12) -------------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(2, 136, 204, 0.55); /* 3px Azure Cyan        */

  /* ---- Overlay scrims --------------------------------------------------- */
  --scrim-navy:   rgba(14, 42, 82, 0.78);
  --scrim-modal:  rgba(10, 30, 61, 0.6);

  /* ---- Bootstrap 5 variable overrides (§11) ---------------------------- */
  --bs-primary:        #D6261C;
  --bs-secondary:      #1F4C8C;
  --bs-primary-rgb:    214, 38, 28;
  --bs-secondary-rgb:  31, 76, 140;
  --bs-body-font-family: var(--lb-font-body);
  --bs-body-color:       #334155;
  --bs-border-color:     #DCE3EC;
  --bs-link-color:       #1F4C8C;
  --bs-link-hover-color: #D6261C;
}

/* Tablet — §4 / §10 */
@media (max-width: 991.98px) {
  :root {
    --section-pad:     64px;
    --container-pad-x: 20px;
  }
}

/* Mobile — §3 mobile type scale + §10 spacing */
@media (max-width: 767.98px) {
  :root {
    --section-pad:     48px;
    --container-pad-x: 16px;
    --grid-gutter:     16px;

    --fs-display: 2.25rem; /* 36px (32–36)                                  */
    --fs-h1:      1.875rem;/* 30px                                          */
    --fs-h2:      1.625rem;/* 26px                                          */
    --fs-h3:      1.25rem; /* 20px                                          */
    --fs-h4:      1.125rem;/* 18px                                          */
    --fs-eyebrow: 0.8125rem;/* 13px                                         */
    --fs-lead:    1rem;    /* 16px                                          */
    --fs-body:    0.9375rem;/* 15px                                         */
    --fs-small:   0.75rem; /* 12px                                          */
    --fs-stat:    2.25rem; /* 36px                                          */
  }
}