/* ==========================================================================
   THEME — colors and fonts for the whole site.
   Every other stylesheet uses these variables.

   --color-background comes from streamd.io (its <meta name="theme-color">).
   The other colors are tints chosen to sit on that background.
   ========================================================================== */

/* StreamD logo font. It contains a single character: the logo D. */
@font-face {
  font-family: "StreamD Logo";
  src: url("../fonts/StreamDLogo.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;   /* show a normal D until the logo D has loaded */
}

:root {
  /* ---- Core palette ---------------------------------------------------- */
  --color-background:   #0C0E14;  /* page background (StreamD)             */
  --color-surface:      #141824;  /* raised areas: nav, footer, modals     */
  --color-rule:         #262C3B;  /* thin lines and borders                */
  --color-text:         #E9EBF1;  /* main text                             */
  --color-text-muted:   #A3AAB9;  /* secondary text                        */
  --color-accent:       #5B9BFF;  /* links, icons, buttons                */
  --color-accent-hover: #8AB8FF;  /* lighter accent for hover/focus        */
  --color-on-accent:    #0C0E14;  /* text placed on top of the accent      */
  --color-ladbx-x:      #C0262D;  /* the X in "LADBX" — brand color, always */
  --color-streamd-d:    #2B71B3;  /* the D in "StreamD" — brand color, always */
  --streamd-d-scale:    0.725;    /* sizes the StreamD logo D so its body matches
                                     the height of capital letters around it */

  /* ---- Fonts ----------------------------------------------------------- */
  /* Archivo is a variable font. "font-stretch" narrows it: headings use a
     condensed width that reads like a broadcast slate; body text uses the
     normal width. */
  --font-family:        "Archivo Variable", "Helvetica Neue", Arial, sans-serif;
  --heading-stretch:    78%;
  --heading-weight:     760;
  --body-weight:        400;

  /* ---- Sizes ----------------------------------------------------------- */
  --text-base:          1.0625rem;                   /* 17px body text      */
  --text-small:         0.9375rem;
  --heading-xl:         clamp(2.6rem, 7vw, 5.75rem); /* hero title          */
  --heading-lg:         clamp(1.9rem, 3.6vw, 2.75rem); /* section titles    */
  --heading-md:         1.25rem;                     /* item titles         */
  --section-spacing:    clamp(3rem, 5.5vw, 4.75rem); /* space above/below   */
  --content-width:      72ch;                        /* max reading width   */

  /* ---- Hero text box --------------------------------------------------- */
  /* Darkness of the box behind the hero text: 0 = clear, 1 = solid.
     0.2 is 80% transparent. */
  --hero-panel-opacity: 0.2;
  --hero-panel-blur:    12px;   /* frosted-glass blur of the video behind */

  /* ---- Partner logos --------------------------------------------------- */
  --partner-columns:        7;        /* logos per row on desktops        */
  --partner-columns-tablet: 5;        /* ...under 992px wide              */
  --partner-columns-phone:  3;        /* ...under 576px wide              */
  --partner-gap:            1.25rem;  /* space between logos              */
}

/* --------------------------------------------------------------------------
   Hand the palette to Bootstrap so its components (tabs, modals, navbar)
   match. The page uses Bootstrap's dark mode (data-bs-theme="dark" on <html>),
   so these overrides target that selector and must load after bootstrap.css.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="dark"] {
  --bs-body-bg:            var(--color-background);
  --bs-body-color:         var(--color-text);
  --bs-body-font-family:   var(--font-family);
  --bs-body-font-size:     var(--text-base);
  --bs-body-font-weight:   var(--body-weight);
  --bs-border-color:       var(--color-rule);
  --bs-secondary-color:    var(--color-text-muted);
  --bs-link-color:         var(--color-accent);
  --bs-link-color-rgb:     91, 155, 255;   /* --color-accent as RGB numbers */
  --bs-link-hover-color:   var(--color-accent-hover);
  --bs-link-hover-color-rgb: 138, 184, 255;
  --bs-emphasis-color:     var(--color-text);
  --bs-tertiary-bg:        var(--color-surface);
}