@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

:root {
  /* =========================
     PRIMARY – BLUE.
     ========================= */
  --color-primary-00: #ffffff;
  --color-primary-05: #f8fbff;
  --color-primary-50: #e8f2ff;
  --color-primary-100: #b6d8ff;
  --color-primary-200: #93c5ff;
  --color-primary-300: #62abff;
  --color-primary-400: #449aff;
  --color-primary-500: #1581ff;
  --color-primary-600: #1375e8;
  --color-primary-700: #0f5cb5;
  --color-primary-800: #0c478c;
  --color-primary-900: #09366b;

  /* =========================
     SECONDARY – GREEN
     ========================= */
  --color-secondary-00: #ffffff;
  --color-secondary-05: #f9fefc;
  --color-secondary-50: #e6fdf7;
  --color-secondary-100: #b0f8e6;
  --color-secondary-200: #8af4d9;
  --color-secondary-300: #55f0c8;
  --color-secondary-400: #34edbd;
  --color-secondary-500: #01e8ad;
  --color-secondary-600: #01d39d;
  --color-secondary-700: #01a57b;
  --color-secondary-800: #01805f;
  --color-secondary-900: #006149;

  /* =========================
     TERTIARY – YELLOW
     ========================= */
  --color-tertiary-00: #ffffff;
  --color-tertiary-05: #fffef7;
  --color-tertiary-50: #fffbe9;
  --color-tertiary-100: #fff2b9;
  --color-tertiary-200: #ffeb98;
  --color-tertiary-300: #ffe268;
  --color-tertiary-400: #ffdd4b;
  --color-tertiary-500: #ffd41e;
  --color-tertiary-600: #e8c11b;
  --color-tertiary-700: #b59715;
  --color-tertiary-800: #8c7511;
  --color-tertiary-900: #6b590d;

  /* =========================
     ADDITIONAL 
     ========================= */
  --color-additional-00: #ffffff;
  --color-additional-05: #fefbfe;
  --color-additional-50: #fdf1fc;
  --color-additional-100: #f8d5f6;
  --color-additional-200: #f5c0f2;
  --color-additional-300: #f0a3ec;
  --color-additional-400: #ed91e9;
  --color-additional-500: #e976e3;
  --color-additional-600: #d46bcf;
  --color-additional-700: #a554a1;
  --color-additional-800: #80417d;
  --color-additional-900: #62325f;

  /* =========================
     ALIASES COLOUR 
     ========================= */

  /* Primary/Element */
  --primary-element-background: var(--color-primary-00);
  --primary-element-pale: var(--color-primary-05);
  --primary-element-subtle: var(--color-primary-50);
  --primary-element-light: var(--color-primary-100);
  --primary-element-mid-light: var(--color-primary-300);
  --primary-element-mid: var(--color-primary-500);
  --primary-element-mid-dark: var(--color-primary-700);
  --primary-element-dark: var(--color-primary-900);

  /* Secondary/Element */
  --secondary-element-background: var(--color-secondary-00);
  --secondary-element-pale: var(--color-secondary-05);
  --secondary-element-subtle: var(--color-secondary-50);
  --secondary-element-light: var(--color-secondary-100);
  --secondary-element-mid-light: var(--color-secondary-300);
  --secondary-element-mid: var(--color-secondary-500);
  --secondary-element-mid-dark: var(--color-secondary-700);
  --secondary-element-dark: var(--color-secondary-900);

  /* Primary/Button */
  --primary-button-foreground-ondark: var(--color-primary-00);
  --primary-button-foreground-onlight: var(--color-primary-500);
  --primary-button-label-inverted: var(--color-primary-900);
  --primary-button-resting: var(--color-primary-500);
  --primary-button-hover: var(--color-primary-700);
  --primary-button-pressed: var(--color-primary-800);

  /* Secondary/Button */
  --secondary-button-foreground-ondark: var(--color-secondary-00);
  --secondary-button-foreground-onlight: var(--color-secondary-500);
  --secondary-button-label-inverted: var(--color-secondary-900);
  --secondary-button-resting: var(--color-secondary-500);
  --secondary-button-hover: var(--color-secondary-700);
  --secondary-button-pressed: var(--color-secondary-800);

  /* Tertiary/Button */
  --tertiary-button-foreground-ondark: var(--color-primary-00);
  --tertiary-button-foreground-onlight: var(--color-primary-700);
  --tertiary-button-label-inverted: var(--color-primary-900);
  --tertiary-button-resting: var(--color-primary-700);
  --tertiary-button-hover: var(--color-primary-800);
  --tertiary-button-pressed: var(--color-primary-900);

  /* Primary/Navigation */
  --primary-nav-label-selected: var(--color-primary-00);
  --primary-nav-label-resting: var(--color-primary-700);
  --primary-nav-label-hover: var(--color-primary-800);
  --primary-nav-label-pressed: var(--color-primary-900);
  --primary-nav-container-selected: var(--color-primary-500);
  --primary-nav-container-selected-hover: var(--color-primary-700);

  /* Primary/Chip */
  --primary-chip-label-selected: var(--color-primary-500);
  --primary-chip-border-selected: var(--color-primary-500);
  --primary-chip-container-selected: var(--color-primary-50);
  --primary-chip-container-selected-hover: var(--color-primary-100);

  /* Primary/Tab */
  --primary-tab-label-resting: var(--color-primary-00);
  --primary-tab-container-active: var(--color-primary-00);
  --primary-tab-container-resting: var(--color-primary-500);
  --primary-tab-container-resting-hover: var(--color-primary-700);

  /* Primary/Title */
  --primary-title-page-title: var(--color-primary-900);
  --primary-title-page-subtitle: var(--color-primary-700);
  --primary-title-card-title: var(--color-primary-900);
  --primary-title-card-subtitle: var(--color-primary-700);
  --primary-title-highlight: var(--color-primary-600);

  /* Secondary/Title */
  --secondary-title-page-title: var(--color-secondary-900);
  --secondary-title-page-subtitle: var(--color-secondary-700);
  --secondary-title-card-title: var(--color-secondary-900);
  --secondary-title-card-subtitle: var(--color-secondary-700);
  --secondary-title-highlight: var(--color-secondary-600);

  /* Primary/Body Text */
  --primary-body-text-highlight: var(--color-primary-600);

  /* Secondary/Body Text */
  --secondary-body-text-highlight: var(--color-secondary-600);

  /* Primary/Hyperlink */
  --primary-hyperlink-onlight: var(--color-primary-500);
  --primary-hyperlink-ondark: var(--color-primary-50);

  /* Primary/Anchor Link */
  --primary-anchor-link-resting: var(--color-primary-500);
  --primary-anchor-link-hover: var(--color-primary-700);
  --primary-anchor-link-pressed: var(--color-primary-800);

  /* Primary/Overlay */
  --primary-overlay-overlaylight: rgba(#09366b, 0.4);

  /* Primary/Shadow */
  --primary-shadow-branded: var(--color-primary-800);

  /* =========================
       GRADIENTS
       ========================= */

  --gradient-element-flashing: linear-gradient(
    135deg,
    #b6d8ff 0%,
    #e8f2ff 51%,
    #b0f8e6 100%
  );

  --gradient-element-fade: linear-gradient(
    90deg,
    var(--color-primary-05) 1%,
    var(--color-primary-05) 0%
  );

  --gradient-element-pattern: linear-gradient(
    90deg,
    rgba(248, 251, 255, 0) 0%,
    #f8fbff 100%
  );

  background: linear-gradient(
    90deg,
    rgba(232, 242, 255, 0) 0%,
    rgba(21, 129, 255, 0.5) 50%,
    rgba(232, 242, 255, 0) 100%
  );

  /* Gradient/Navigation */
  --gradient-navigation-separator: linear-gradient(
    90deg,
    rgba(232, 242, 255, 0) 0%,
    rgba(21, 129, 255, 0.5) 50%,
    rgba(232, 242, 255, 0) 100%
  );
  background: linear-gradient(90deg, rgba(232, 242, 255, 0) 0%, #e8f2ff 100%);
  
  --gradient-navigation-separator : linear-gradient(90deg, #e8f2ff00 0%, #e8f2ff 50%, #e8f2ff00 100%);

    /* Font */
  --font-title: "Figtree";

}