@charset "UTF-8";
/* ==========================================================================
   PUBLICATION THEME -- CLIENT VARIABLES
   --------------------------------------------------------------------------
   This is the ONLY file you need to edit to re-skin the theme for a new
   client / publication. Change the values below, rebuild (or just re-upload
   this one file to the iMIS theme folder), and the whole site re-skins.

   RiSE loads every .css file in a theme folder in filename order, so this
   file (00-variables.css in the build output) always loads before the
   design layer (z-custom-site.css) and its values cascade everywhere.

   Sections:
     1. Fonts        -- web-font import + family tokens
     2. Palette      -- the raw colour swatches
     3. Brand roles  -- semantic colours the design layer actually references
     4. Assets       -- logos / background images (full url() values)
     5. Spacing      -- the scale that drives the padding/margin helpers
     6. Layout/misc  -- container width, radius, borders
   ========================================================================== */

/* 1. FONTS -----------------------------------------------------------------
   Swap the import URL and --font-primary together to change the typeface. */
/* Montserrat Poppins */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --font-primary: "Poppins", sans-serif;
  --font-heading: "Montserrat", sans-serif;
  --font-display: "Lora", Georgia, serif;
  --font-body: var(--font-primary);

  /* 2. PALETTE -------------------------------------------------------------
     Raw swatches. Rename/retint freely; the brand roles below point here. */

  /* Neutrals */
  --color-white:         #ffffff;
  --color-grey-lightest: #fcfcff;
  --color-grey-lighter:  #f2f2f2;
  --color-grey-light:    #dbdbdb;
  --color-grey:          #cacacd;
  --color-grey-mid:      #999999;
  --color-grey-dark:     #525252;
  --color-text:          #222222;
  --color-ink:           #000000;
  --color-dark:          #17343a;
  --color-slate:         #274449;

  /* Extended neutral ramp (consolidated from Flat_White's assorted greys) */
  --color-grey-100:      #eeeeee;
  --color-grey-200:      #e0e0e0;
  --color-grey-300:      #cccccc;
  --color-grey-400:      #b5b5b9;
  --color-grey-600:      #6c757d;
  --color-grey-800:      #333333;
  --color-grey-900:      #212529;

  /* Brand + accents  (primary brand = teal #0f6570) */
  --color-brand:               #0f6570;
  --color-brand-visited:       #2a7681;
  --color-brand-dark:          #0b4d57;
  --color-accent-teal:         #27a9cc;
  --color-accent-teal-light:   #8ed6e9;
  --color-accent-green:        #4e937a;
  --color-accent-green-dark:   #45826c;
  --color-accent-green-bright: #68bd49;
  --color-accent-orange:       #f89c57;
  --color-accent-orange-dark:  #e98300;
  --color-accent-red:          #d03528;
  --color-accent-red-dark:     #ae2c21;
  --color-accent-purple:       #8e51ae;

  /* Extended brand / accent shades (used by components; safe to retint) */
  --color-brand-light:          #3f8f9a;
  --color-brand-lighter:        #86b8bf;
  --color-brand-darker:         #08383f;
  --color-brand-darkest:        #052429;
  --color-blue-grey:            #3d5459;
  --color-accent-teal-lightest: #d2f5ff;
  --color-teal-dark:            #005582;
  --color-teal-darkest:         #002632;
  --color-green-light:          #a0c1b5;
  --color-orange-light:         #db9e70;
  --color-peach:                #ffccba;
  --color-pink-light:           #ffdadd;
  --color-gold:                 #ffdd6f;
  --color-yellow:               #e8d92d;

  /* Brand-tinted overlay (focus glow used by inputs / social icons) */
  --color-brand-glow:           rgba(15, 101, 112, 0.45);

  /* Social network brand colours (for social-media-icons.css) */
  --color-facebook:     #3b5998;
  --color-linkedin:     #0077b5;
  --color-twitter:      #00a9e0;
  --color-youtube:      #c4302b;
  --color-pinterest:    #e60023;
  --color-skype:        #00aff0;
  --color-instagram:    #e1306c;
  --color-snapchat:     #fffc00;
  --color-social-email: #0a629a;

  /* RGB triplets for rgba() overlays & shadows -- per-use alpha stays inline,
     but the base colour is now a token (change --shadow-rgb for tinted shadows). */
  --shadow-rgb:              0, 0, 0;
  --overlay-light-rgb:       255, 255, 255;
  --color-brand-rgb:         15, 101, 112;
  --color-dark-rgb:          23, 52, 58;
  --color-text-rgb:          34, 34, 34;
  --color-accent-orange-rgb: 248, 156, 87;

  /* 3. BRAND ROLES ---------------------------------------------------------
     Semantic tokens the design layer actually references, so re-pointing one
     line here re-colours every component that uses it. The primary brand
     colour is --color-brand (above); links/headings/footer point at it. */
  --body-bg:       var(--color-white);
  --color-heading: var(--color-brand-dark);

  --link-color:          var(--color-brand);
  --link-color-visited:  var(--color-brand-visited);
  --link-color-hover:    var(--color-brand-dark);
  --link-color-disabled: var(--color-grey-mid);

  --color-border: var(--color-grey-light);

  /* --- COMPONENT / AREA TOKENS ---------------------------------------------
     Each defaults to a brand/semantic token above, but you can override any
     ONE line to retint just that area of the page without moving anything
     else. e.g. set --btn-primary-bg to give buttons a colour distinct from
     links, or --header-nav-hover to change only the header nav hover. */

  /* Header band + utility (aux) bar (light header: white bg, dark text/nav) */
  --color-header-bg:   var(--color-white);        /* header band + aux bar background */
  --color-header-text: var(--color-text);         /* header text / logo area */
  --header-nav-color:  var(--color-header-text);  /* nav links on the header band */
  --header-nav-hover:  var(--color-brand);         /* teal hover, reads on white */
  --aux-bg: var(--color-brand-darker);
  --aux-bg-rev: var(--color-brand-darker);
  --aux-link-color: var(--color-white);

  /* Navigation (light primary + secondary nav, off the header band) */
  --nav-color:         var(--color-ink);          /* nav text */
  --nav-link-hover:    var(--color-accent-teal);  /* nav hover accent */

  /* Buttons (text stays white for contrast; retint the backgrounds) */
  --btn-primary-bg:         var(--color-brand);
  --btn-primary-hover-bg:   var(--color-brand-darker);
  --btn-secondary-bg:       var(--color-accent-green-dark);
  --btn-secondary-hover-bg: var(--color-accent-green-bright);

  /* Article Hero:  Title, Subtitle, and backgrounds */
   --article-hero-text-color: var(--color-white);
   --article-hero-text-shadow: .1em .1em .5em #000000;
   --article-hero-bg1: rgba(var(--color-brand-rgb), .6);
   --article-hero-bg2: rgb(255 228 136 / 20%);
  

  /* Footer */
  --color-footer-bg:   var(--color-brand-darker);
  --color-footer-text: var(--color-white);
  --footer-link:       var(--color-footer-text);

  /* System icons (edit / gear / etc. in iMIS chrome) */
  --system-icon-color:       var(--color-dark);
  --system-icon-color-hover: var(--color-accent-teal);

  /* Tables -- clean, minimal defaults (see helpers-tables.css) */
  --table-border:       var(--color-border);
  --table-header-bg:    var(--color-grey-lighter);
  --table-header-text:  var(--color-ink);
  --table-stripe:       var(--color-grey-lightest);
  --table-row-hover:    var(--color-grey-lighter);
  --table-cell-padding: 0.65em 0.85em;

  /* 4. ASSETS --------------------------------------------------------------
     Brandable images. Each is a COMPLETE url() value because CSS cannot
     compose url(var(--base)/file). All live in this theme's images/ folder;
     to point at a CDN, put the absolute URL in the url(). Structural sprites
     (icons, carets) stay as relative paths in the design layer. */
  --logo-primary:       url("/images/brainhealthhub/logos/svg/Brain%20and%20Health%20Today%20Logo-26.svg");
  --logo-inverse:       url("/images/brainhealthhub/logos/svg/Brain%20and%20Health%20Today%20Logo-26-rev.svg");
  --logo-header:        url("/images/brainhealthhub/logos/png/Brain%20and%20Health%20Today%20Logo-26.png");
  --img-decorative:     url("images/bg-geometric-blue.png");
  --img-testimonial-bg: url("images/testimonialBackground.jpg");
  --img-promo-1:        url("images/joinnow-01.jpg");
  --img-promo-2:        url("images/joinnow-02.jpg");
  /* Set a client header/hero background image here, or leave as none: */
  --img-header-bg: none;
  --img-hero:      none;

  /* Structural UI sprites / icons (theme chrome, rarely re-skinned but
     tokenised for completeness). */
  --sprite-header:  url("images/ResponsiveHeaderSprite.png");
  --sprite-nav:     url("images/ResponsiveNav.png");
  --sprite-obo:     url("images/OboSprite.png");
  --sprite-icons:   url("images/IconSprite.png");
  --icon-collapse:  url("images/CollapseIcon.png");
  --icon-arrow:     url("images/arrow.svg");
  --icon-arrows:    url("images/arrows.svg");
  --icon-reply:     url("images/reply-arrow.svg");

  /* NOT tokenised (by necessity): fragment-referenced SVG sprites such as
     url("images/auxIcons.svg#caret") and url("images/mh-icons.svg#orgs") --
     CSS cannot compose url(var(--x)#id), so these stay as relative paths.
     iMIS core icons referenced as ../../Assets/... are platform paths and
     are intentionally left untouched. */

  /* 5. SPACING -------------------------------------------------------------
     Single source of truth for the padding/margin helper scale
     (helpers-spacing.css generates .p-*/.m-* from these). */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* 6. LAYOUT / MISC -------------------------------------------------------- */
  --container-max: 1380px;
  --radius:      4px;
  --radius-lg:   8px;
  --radius-pill: 40px;
  --border-width: 1px;
}