/* ==========================================================================
   90-whitelabelling.css
   Media Site Gen 2: Customer branding overrides
   Purpose:
   - Override design tokens from 00-core.css for customer-specific branding
   - Keep changes limited to variables so the platform remains upgradeable
   Loading:
   - Load AFTER 00-core.css and before component CSS where possible
   - Or load last if you want it to win over everything
   ========================================================================== */

/* ==========================================================================
   1) Global brand overrides (default customer theme)
   Notes:
   - Prefer overriding the smallest set of tokens needed:
     primary/link, focus, surfaces, text, border, semantic colours (optional)
   ========================================================================== */

:root {
  /* Primary brand colour */
  --link: rgba(11, 127, 171, 1); 
  --link-hover: rgba(9, 114, 154, 1); 

  /* Primary aliases */
  --primary: var(--link);
  --primary-hover: var(--link-hover);

  /* Text on primary (usually white for strong brand colours) */
  --on-primary: rgb(255, 255, 255, 1);; 

  /* Focus ring should remain visible on both light surfaces and brand elements */
  --focus: rgba(11, 127, 171, 0.66); 

  /* Theme colours */
  /* --theme-1: rgb(9, 111, 4);
    --theme-2: rgb(4, 108, 68);
    --theme-3: rgb(4, 105, 118);
    --theme-4: rgb(76, 9, 244);
    --theme-5: rgb(156, 7, 197);
    --theme-6: rgb(172, 6, 153);
  */

  /* Element Radii */
    --radius-button: var(--radius-md);
    --radius-hero: var(--radius-lg);
    --radius-card: var(--radius-lg);
    --radius-badge: var(--radius-sm);
    --radius-image: var(--radius-md);
    --radius-search: var(--radius-pill);

  /* Fonts*/
  --font-body: 'Roboto Flex', var(--font-sans);
}


.hero--overlay .hero__inner::before {
  --hero-overlay-bottom-from: rgb(6, 76, 102, 0);
  --hero-overlay-bottom-to: rgb(6, 76, 102, 1);

  --hero-overlay-side-from: rgb(6, 76, 102, 0);
  --hero-overlay-side-mid: rgb(6, 76, 102, 0.5);
  --hero-overlay-side-to: rgb(6, 76, 102, 1);
}

body {
    font-family: var(--font-body);
}

@font-face {
  font-family: 'Roboto Flex';
  src: url('/Content?applicationId=45e5b7a0-1891-48c9-9385-d683e55420fe&fileName=font-body-VariableFont.ttf') format('truetype');
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-style: oblique -10deg 0deg;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('/Content?applicationId=45e5b7a0-1891-48c9-9385-d683e55420fe&fileName=font-heading-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}