/* =============================================================================
   RetrievED Design Tokens
   Generated from RetrievED Design Guide (Figma)
   ============================================================================= */

:root {

  /* ===========================================================================
     COLOUR PRIMITIVES
     =========================================================================== */

  /* Primary — Blue */
  --colour-primary-5:                    #f4f8fd;
  --colour-primary-10:                   #e0ebfb;
  --colour-primary-20:                   #cbddf7;
  --colour-primary-30:                   #afc7f1;
  --colour-primary-40:                   #8caeed;
  --colour-primary-50:                   #6791e9;
  --colour-primary-60:                   #3369e8;
  --colour-primary-70:                   #244fcc;
  --colour-primary-70-transparent:       #244fcc80;
  --colour-primary-80:                   #1a3d96;
  --colour-primary-90:                   #0a2567;
  --colour-primary-95:                   #020f34;

  /* Secondary — Teal */
  --colour-secondary-5:                  #eaf8f8;
  --colour-secondary-10:                 #cff7f5;
  --colour-secondary-20:                 #a1ecea;
  --colour-secondary-30:                 #78e2df;
  --colour-secondary-40:                 #60cecb;
  --colour-secondary-50:                 #4eb7b4;
  --colour-secondary-60:                 #3f9a98;
  --colour-secondary-70:                 #307876;
  --colour-secondary-80:                 #225a59;
  --colour-secondary-90:                 #153d3c;
  --colour-secondary-95:                 #051a19;

  /* Neutral — Grey */
  --colour-neutral-0:                    #ffffff;
  --colour-neutral-3:                    #fbfbfb;
  --colour-neutral-5:                    #f7f7f7;
  --colour-neutral-10:                   #eeeeee;
  --colour-neutral-20:                   #dcdcdc;
  --colour-neutral-30:                   #cbcbcb;
  --colour-neutral-40:                   #b6b6b6;
  --colour-neutral-50:                   #989898;
  --colour-neutral-60:                   #7d7d7d;
  --colour-neutral-70:                   #606060;
  --colour-neutral-80:                   #444444;
  --colour-neutral-90:                   #2a2a2a;
  --colour-neutral-95:                   #121212;

  /* White Transparency */
  --colour-white-0:                      #ffffff00;
  --colour-white-3:                      #ffffff08;
  --colour-white-5:                      #ffffff0d;
  --colour-white-10:                     #ffffff1a;
  --colour-white-15:                     #ffffff26;
  --colour-white-20:                     #ffffff33;
  --colour-white-30:                     #ffffff4d;
  --colour-white-40:                     #ffffff66;
  --colour-white-50:                     #ffffff80;
  --colour-white-60:                     #ffffff99;
  --colour-white-70:                     #ffffffb2;
  --colour-white-80:                     #ffffffcc;
  --colour-white-90:                     #ffffffe5;
  --colour-white-95:                     #fffffff2;
  --colour-white-100:                    #ffffff;


  /* ===========================================================================
     SEMANTIC TOKENS — COLOUR
     =========================================================================== */

  /* Button — Primary */
  --button-primary-enabled:              var(--colour-primary-70);
  --button-primary-hover:                var(--colour-primary-60);
  --button-primary-pressed:              var(--colour-primary-80);
  --button-primary-on-primary:           var(--colour-neutral-5);

  /* Button — Secondary */
  --button-secondary-enabled:            var(--colour-secondary-20);
  --button-secondary-hover:              var(--colour-secondary-30);
  --button-secondary-pressed:            var(--colour-secondary-40);
  --button-secondary-on-secondary:       var(--colour-neutral-90);

  /* Button — Neutral */
  --button-neutral-enabled:              var(--colour-neutral-30);
  --button-neutral-hover:                var(--colour-neutral-40);
  --button-neutral-pressed:              var(--colour-neutral-50);
  --button-neutral-on-neutral:           var(--colour-neutral-90);

  /* Button — Transparent */
  --button-transparent-enabled:          var(--colour-white-0);
  --button-transparent-hover:            var(--colour-white-40);
  --button-transparent-pressed:          var(--colour-white-90);
  --button-transparent-on-transparent:   var(--colour-neutral-90);

  /* Button — Light */
  --button-light-enabled:                var(--colour-white-0);
  --button-light-hover:                  var(--colour-primary-10);
  --button-light-hover-2:                var(--colour-primary-20);
  --button-light-on-light:               var(--colour-neutral-90);

  /* Panel */
  --panel-main-default:                  var(--colour-neutral-0);
  --panel-list-item-default:             var(--colour-neutral-0);
  --panel-list-item-hover:               var(--colour-neutral-5);
  --panel-list-item-pressed:             var(--colour-neutral-10);
  --panel-list-item-active:              var(--colour-primary-10);
  --panel-list-item-learning-objectives-hover:   var(--colour-primary-20);
  --panel-list-item-learning-objectives-pressed: var(--colour-primary-30);
  --panel-list-item-on-list:             var(--colour-neutral-90);

  /* Background */
  --background-default:                  var(--colour-neutral-3);
  --background-primary:                  var(--colour-primary-5);
  --background-primary-dark:             var(--colour-primary-20);

  /* Surface */
  --surface-learning-objectives:         var(--colour-primary-10);
  --surface-callout:                     var(--colour-neutral-3);
  --surface-callout-border:              var(--colour-primary-20);
  --surface-neutral-border:              var(--colour-neutral-20);
  --surface-interactive-border:          var(--colour-primary-70-transparent);
  --surface-module-cards:                var(--colour-neutral-0);

  /* Text */
  --text-default:                        var(--colour-neutral-95);
  --text-primary:                        var(--colour-primary-90);
  --text-weak:                           var(--colour-neutral-60);
  --text-labels-default:                 var(--colour-neutral-70);
  --text-labels-highlight:               var(--colour-secondary-60);
  --text-footer-links-default:           var(--colour-neutral-90);
  --text-footer-links-hover:             var(--colour-primary-60);
  --text-footer-links-pressed:           var(--colour-primary-70);


  /* ===========================================================================
     SPACING
     =========================================================================== */

  --spacing-xxs:                         4px;
  --spacing-xs:                          8px;
  --spacing-s:                           12px;
  --spacing-m:                           16px;
  --spacing-l:                           24px;
  --spacing-xl:                          32px;
  --spacing-xxl:                         40px;
  --spacing-xxxl:                        48px;
  --spacing-xxxxl:                       64px;
  --spacing-page-margins:                120px;
  --spacing-page-margins-lg:             180px;


  /* ===========================================================================
     CORNER RADII
     =========================================================================== */

  --corner-no-radius:                    0px;
  --corner-xs-radius:                    4px;
  --corner-s-radius:                     8px;
  --corner-m-radius:                     16px;
  --corner-l-radius:                     24px;
  --corner-round:                        100px;


  /* ===========================================================================
     BORDER WEIGHTS
     =========================================================================== */

  --weight-xs:                           4px;
  --weight-xxs:                          2px;
  --weight-s:                            8px;
  --weight-m:                            16px;


  /* ===========================================================================
     TYPOGRAPHY
     =========================================================================== */

  --font-family:                         'Inter', sans-serif;

  /* Display */
  --type-display-size:                   52px;
  --type-display-line-height:            68px;
  --type-display-weight:                 600;
  --type-display-tracking:               0px;

  /* Display Mobile*/
  --type-display-m-size:                   40px;
  --type-display-m-line-height:            48px;
  --type-display-m-weight:                 600;
  --type-display-m-tracking:               0px;

  /* H1 */
  --type-h1-size:                        32px;
  --type-h1-line-height:                 48px;
  --type-h1-weight:                      600;
  --type-h1-tracking:                    0px;

  /* H2 */
  --type-h2-size:                        24px;
  --type-h2-line-height:                 40px;
  --type-h2-weight:                      400;
  --type-h2-tracking:                    0px;

  /* H3 */
  --type-h3-size:                        24px;
  --type-h3-line-height:                 32px;
  --type-h3-weight:                      600;
  --type-h3-tracking:                    0px;

  /* Body */
  --type-body-size:                      16px;
  --type-body-line-height:               28px;
  --type-body-weight:                    400;
  --type-body-tracking:                  0px;

  /* Interactive */
  --type-interactive-size:               16px;
  --type-interactive-line-height:        24px;
  --type-interactive-weight:             400;
  --type-interactive-tracking:           0px;

  /* Card body */
  --type-card-body-size:                 16px;
  --type-card-body-line-height:          24px;
  --type-card-body-weight:               400;
  --type-card-body-tracking:             0px;

  /* Labels (Medium Italic) */
  --type-labels-size:                    16px;
  --type-labels-line-height:             24px;
  --type-labels-weight:                  400;
  --type-labels-tracking:                0px;
  --type-labels-style:                   italic;

    /* Figure captions) */
  --type-figure-caption-size:            14px;
  --type-figure-caption-line-height:     16px;
  --type-figure-caption-weight:          400;
  --type-figure-caption-tracking:        0px;
  --type-figure-caption-style:           italic;

  /* Tooltip title */
  --type-tooltip-size:                   16px;
  --type-tooltip-line-height:            24px;
  --type-tooltip-weight:                 600;
  --type-tooltip-tracking:               0px;

  /* Button — Large */
  --type-button-l-size:                  18px;
  --type-button-l-line-height:           24px;
  --type-button-l-weight:                600;
  --type-button-l-tracking:              0.15px;

  /* Button — Medium */
  --type-button-m-size:                  16px;
  --type-button-m-line-height:           32px;
  --type-button-m-weight:                600;
  --type-button-m-tracking:              0px;

  /* Button — Small */
  --type-button-s-size:                  14px;
  --type-button-s-line-height:           24px;
  --type-button-s-weight:                600;
  --type-button-s-tracking:              0.15px;

  /* Sidebar — Module header */
  --type-sidebar-module-size:            14px;
  --type-sidebar-module-line-height:     32px;
  --type-sidebar-module-weight:          600;
  --type-sidebar-module-tracking:        0px;

  /* Sidebar — Item (active) */
  --type-sidebar-item-active-size:       14px;
  --type-sidebar-item-active-line-height:16px;
  --type-sidebar-item-active-weight:     600;
  --type-sidebar-item-active-tracking:   0px;

  /* Sidebar — Item (default) */
  --type-sidebar-item-size:              14px;
  --type-sidebar-item-line-height:       16px;
  --type-sidebar-item-weight:            500;
  --type-sidebar-item-tracking:          0px;

   /* Display Mobile*/
  --type-display-m-size:                   40px;
  --type-display-m-line-height:            48px;
  --type-display-m-weight:                 600;
  --type-display-m-tracking:               0px;

  /* H1 */
  --type-h1-m-size:                        24px;
  --type-h1-m-line-height:                 32px;
  --type-h1-m-weight:                      600;
  --type-h1-m-tracking:                    0px;

  /* H2 */
  --type-h2-m-size:                        24px;
  --type-h2-m-line-height:                 32px;
  --type-h2-m-weight:                      400;
  --type-h2-m-tracking:                    0px;

  /* H3 */
  --type-h3-m-size:                        20px;
  --type-h3-m-line-height:                 24px;
  --type-h3-m-weight:                      600;
  --type-h3-m-tracking:                    0px;

  /* Body */
  --type-body-m-size:                      16px;
  --type-body-m-line-height:               20px;
  --type-body-m-weight:                    400;
  --type-body-m-tracking:                  0px;

}


/* =============================================================================
   TYPOGRAPHY UTILITY CLASSES
   ============================================================================= */

.text-display {
  font-family: var(--font-family);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line-height);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
}

.text-h1 {
  font-family: var(--font-family);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line-height);
  font-weight: var(--type-h1-weight);
  letter-spacing: var(--type-h1-tracking);
}

.text-h2 {
  font-family: var(--font-family);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line-height);
  font-weight: var(--type-h2-weight);
  letter-spacing: var(--type-h2-tracking);
}

.text-h3 {
  font-family: var(--font-family);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-tracking);
}

.text-body {
  font-family: var(--font-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-tracking);
}

.text-interactive {
  font-family: var(--font-family);
  font-size: var(--type-interactive-size);
  line-height: var(--type-interactive-line-height);
  font-weight: var(--type-interactive-weight);
  letter-spacing: var(--type-interactive-tracking);
}

.text-labels {
  font-family: var(--font-family);
  font-size: var(--type-labels-size);
  line-height: var(--type-labels-line-height);
  font-weight: var(--type-labels-weight);
  letter-spacing: var(--type-labels-tracking);
  font-style: var(--type-labels-style);
}

.text-tooltip {
  font-family: var(--font-family);
  font-size: var(--type-tooltip-size);
  line-height: var(--type-tooltip-line-height);
  font-weight: var(--type-tooltip-weight);
  letter-spacing: var(--type-tooltip-tracking);
}

.text-button-l {
  font-family: var(--font-family);
  font-size: var(--type-button-l-size);
  line-height: var(--type-button-l-line-height);
  font-weight: var(--type-button-l-weight);
  letter-spacing: var(--type-button-l-tracking);
}

.text-button-m {
  font-family: var(--font-family);
  font-size: var(--type-button-m-size);
  line-height: var(--type-button-m-line-height);
  font-weight: var(--type-button-m-weight);
  letter-spacing: var(--type-button-m-tracking);
}

.text-button-s {
  font-family: var(--font-family);
  font-size: var(--type-button-s-size);
  line-height: var(--type-button-s-line-height);
  font-weight: var(--type-button-s-weight);
  letter-spacing: var(--type-button-s-tracking);
}

.text-sidebar-module {
  font-family: var(--font-family);
  font-size: var(--type-sidebar-module-size);
  line-height: var(--type-sidebar-module-line-height);
  font-weight: var(--type-sidebar-module-weight);
  letter-spacing: var(--type-sidebar-module-tracking);
}

.text-sidebar-item-active {
  font-family: var(--font-family);
  font-size: var(--type-sidebar-item-active-size);
  line-height: var(--type-sidebar-item-active-line-height);
  font-weight: var(--type-sidebar-item-active-weight);
  letter-spacing: var(--type-sidebar-item-active-tracking);
}

.text-sidebar-item {
  font-family: var(--font-family);
  font-size: var(--type-sidebar-item-size);
  line-height: var(--type-sidebar-item-line-height);
  font-weight: var(--type-sidebar-item-weight);
  letter-spacing: var(--type-sidebar-item-tracking);
}