/* ========================================================================================= */
/* #region SNPGUICOREPALETTE - SchoolNavigatorProfile: HISD Core Palette v1.0.0 */
/* ========================================================================================= */

:root {
  /* #region hisd-core */
  --hisd-teal:                #00A3AF;
  --hisd-dark-grey:           #24383C;
  --hisd-light-green:         #6DB83D;
  --hisd-dark-green:          #006F5B;
  --hisd-yellow:              #F9D04E;
  --hisd-purple:              #474F99;
  --hisd-blue:                #4975BD;
  --hisd-light-grey:          #D4D4D5;
  --hisd-off-white:           #FFFFED;
  --hisd-white:               #FFFFFF;
  --hisd-red:                 #D96364;
  /* #endregion hisd-core */

  /* #region hisd-shades-tints-tones */
  --hisd-teal-shade-10B: color-mix(in srgb, var(--hisd-teal) 90%, black 10%);
  --hisd-teal-shade-20B: color-mix(in srgb, var(--hisd-teal) 80%, black 20%);
  --hisd-teal-shade-30B: color-mix(in srgb, var(--hisd-teal) 70%, black 30%);
  --hisd-teal-shade-40B: color-mix(in srgb, var(--hisd-teal) 60%, black 40%);
  --hisd-teal-shade-50B: color-mix(in srgb, var(--hisd-teal) 50%, black 50%);
  --hisd-teal-shade-60B: color-mix(in srgb, var(--hisd-teal) 40%, black 60%);
  --hisd-teal-shade-70B: color-mix(in srgb, var(--hisd-teal) 30%, black 70%);
  --hisd-teal-shade-80B: color-mix(in srgb, var(--hisd-teal) 20%, black 80%);
  --hisd-teal-shade-90B: color-mix(in srgb, var(--hisd-teal) 10%, black 90%);
  --hisd-teal-tint-10W:  color-mix(in srgb, var(--hisd-teal) 90%, white 10%);
  --hisd-teal-tint-20W:  color-mix(in srgb, var(--hisd-teal) 80%, white 20%);
  --hisd-teal-tint-30W:  color-mix(in srgb, var(--hisd-teal) 70%, white 30%);
  --hisd-teal-tint-40W:  color-mix(in srgb, var(--hisd-teal) 60%, white 40%);
  --hisd-teal-tint-50W:  color-mix(in srgb, var(--hisd-teal) 50%, white 50%);
  --hisd-teal-tint-60W:  color-mix(in srgb, var(--hisd-teal) 40%, white 60%);
  --hisd-teal-tint-70W:  color-mix(in srgb, var(--hisd-teal) 30%, white 70%);
  --hisd-teal-tint-80W:  color-mix(in srgb, var(--hisd-teal) 20%, white 80%);
  --hisd-teal-tint-90W:  color-mix(in srgb, var(--hisd-teal) 10%, white 90%);
  --hisd-teal-tone-10G:  color-mix(in srgb, var(--hisd-teal) 90%, #888 10%);
  --hisd-teal-tone-20G:  color-mix(in srgb, var(--hisd-teal) 80%, #888 20%);
  --hisd-teal-tone-30G:  color-mix(in srgb, var(--hisd-teal) 70%, #888 30%);
  --hisd-teal-tone-40G:  color-mix(in srgb, var(--hisd-teal) 60%, #888 40%);
  --hisd-teal-tone-50G:  color-mix(in srgb, var(--hisd-teal) 50%, #888 50%);
  --hisd-teal-tone-60G:  color-mix(in srgb, var(--hisd-teal) 40%, #888 60%);
  --hisd-teal-tone-70G:  color-mix(in srgb, var(--hisd-teal) 30%, #888 70%);
  --hisd-teal-tone-80G:  color-mix(in srgb, var(--hisd-teal) 20%, #888 80%);
  --hisd-teal-tone-90G:  color-mix(in srgb, var(--hisd-teal) 10%, #888 90%);
  /* ...shades/tints/tones for other colors, not repeated for brevity... */
  /* #endregion hisd-shades-tints-tones */

  /* #region site-font-families */
  --font-heading: 'Parkin Sans', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Radio Canada', Arial, sans-serif;
  --font-serif: 'Lora', Times New Roman, Times, serif;
  /* #endregion site-font-families */
}

/* #endregion SNPGUICOREPALETTE - SchoolNavigatorProfile: HISD Core Palette v1.0.0 */
/* ========================================================================================= */


/* ========================================================================================= */
/* #region SNPGUIHTMLBODYBASICS - SchoolNavigatorProfile: HTML/Body Basics v1.0.0 */
/* ========================================================================================= */

html, body {
    height: 100vh !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: var(--font-body);
    background: whitesmoke;
    color: var(--hisd-dark-grey);
    box-sizing: border-box;
}

/* Universal box-sizing reset */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* #endregion SNPGUIHTMLBODYBASICS - SchoolNavigatorProfile: HTML/Body Basics v1.0.0 */
/* ========================================================================================= */


/* ========================================================================================= */
/* #region SNPGUITYPOGRAPHY - SchoolNavigatorProfile: Typography v1.0.0 */
/* ========================================================================================= */

/* --- Headings: Parkin Sans (all sizes/weights supported by Google Fonts import) --- */
h1, h2, h3, h4, h5, h6, .heading, .font-heading {
  font-family: var(--font-heading) !important;
  color: var(--hisd-dark-grey);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 0.3em;
  margin-bottom: 0.5em;
}
h1 { font-size: 2.7rem; font-weight: 700; }
h2 { font-size: 2.1rem; font-weight: 600; }
h3 { font-size: 1.62rem; font-weight: 600; }
h4 { font-size: 1.3rem; font-weight: 500; }
h5 { font-size: 1.12rem; font-weight: 400; }
h6 { font-size: 1rem; font-weight: 400; }

.font-parkin-light { font-family: var(--font-heading); font-weight: 300 !important; }
.font-parkin-regular { font-family: var(--font-heading); font-weight: 400 !important; }
.font-parkin-medium { font-family: var(--font-heading); font-weight: 500 !important; }
.font-parkin-semibold { font-family: var(--font-heading); font-weight: 600 !important; }
.font-parkin-bold { font-family: var(--font-heading); font-weight: 700 !important; }

/* --- Body: Radio Canada --- */
body, p, span, .font-body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--hisd-dark-grey);
}
.font-radio-light { font-family: var(--font-body); font-weight: 300 !important; }
.font-radio-medium { font-family: var(--font-body); font-weight: 500 !important; }
.font-radio-semibold { font-family: var(--font-body); font-weight: 600 !important; }
.font-radio-bold { font-family: var(--font-body); font-weight: 700 !important; }

/* --- Serif Option for special cases --- */
.serif, .body-serif { font-family: var(--font-serif) !important; font-weight: 400; }

/* #endregion SNPGUITYPOGRAPHY - SchoolNavigatorProfile: Typography v1.0.0 */
/* ========================================================================================= */