:root {
  /* Gelato Days Palette */
  --gelato-pink: #ffcbe1;
  --gelato-green: #d6e5bd;
  --gelato-yellow: #f9e1a8;
  --gelato-blue: #bcd8ec;
  --gelato-lavender: #dcccec;
  --gelato-peach: #ffdab4;

  /* Background color */
  --gelato-bg: #fff5f5;

  /* Window / components max width/height */
  --navbar-width: 800px;
  /* --outer-width: 690px; */
  --outer-width: 780px;
  --intermediary-width: 670px;
  --inner-width: 630px;
  --image-height: 365px;

  --border-radius: 6px;
  --container-border-radius: 10px;

  /* Spacing */
  --space: 0.3rem;
  --spacehalf: calc(0.5 * var(--space));
  --space1: calc(1 * var(--space));
  --space1andhalf: calc(1.5 * var(--space));
  --space2: calc(2 * var(--space));
  --space3: calc(3 * var(--space));
  --space4: calc(4 * var(--space));
  --space5: calc(5 * var(--space));
  --space6: calc(6 * var(--space));
  --space8: calc(8 * var(--space));
  --space10: calc(10 * var(--space));
  --space12: calc(12 * var(--space));
  --space14: calc(14 * var(--space));
  --space15: calc(15 * var(--space));
  --space16: calc(16 * var(--space));
  --space20: calc(20 * var(--space));

  /* Font size */
  --font-size: calc(1rem + 0vw);
  --h1-font-size: 2rem;
  --h2-font-size: 1.6rem;
  --h3-font-size: 1.5rem;
  --h4-font-size: 1.2rem;
  --h5-font-size: 1rem;
  --logo-font-size: calc(1.4rem + 0.2vw - 0.1rem);

  /* Styles for narrow viewports */
  @media screen and (min-width: 740px) {
    --h1-font-size: 2.25rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.75rem;
    --h4-font-size: 1.35rem;
    --h5-font-size: 1.05rem;
  }

  /* Line heights */
  /* TODO : decide */
  --line-height: 1.8;
  --h-line-height: 1.2;

  /* Font families */
  /* --font-family: "Open Sans", sans-serif;
  --h-font-family: "Roboto Slab", serif; */

  --font-family: "Open Sans", sans-serif;
  --h-font-family: "Red Hat Display", sans-serif;

  /* --logo-font-family: "Nunito", sans-serif; */

  /* --h-font-family: "Montserrat", serif; */

  /* Font weights */
  --font-weight: 400;
  --h1-font-weight: 300;
  --h2-font-weight: 300;
  --h3-font-weight: 300;
  --h4-font-weight: 100;

  --h2-color: var(--blue-comeau);

  --h-less-font-weight: 400;

  /******************** ALL COLORS ********************/
  /******************** ALL COLORS ********************/
  /******************** ALL COLORS ********************/
  /*******  GRAY AND DARK ******/
  --black-hard: #000;
  --gray7: #151510;
  --deep-charcoal: #1a1a1a;
  --soft-dark-gray: #2c2c2c;
  --dark-charcoal: #333;
  --charcoal: #4a4a4a;
  /*******  WHITISH  *******/
  --white-pure: #ffffff;
  --white-smoke: #f5f5f5;
  --soft-white: #f8f8f8;
  --light-blue: rgb(229 231 235);
  --mid-blue: rgb(224, 233, 247);
  --warm-beige: #d8d0c1;
  /*******  SAND / CREAM / TAUPE  *******/
  --creamy: #e8e2d6;
  --soft-creamy: #f0ede8;

  --darker-taupe: rgb(48, 45, 39);
  /******************** PARAMS ALL THEMES ********************/
  /******************** PARAMS ALL THEMES ********************/
  /******************** PARAMS ALL THEMES ********************/

  /* SHADOW */
  --shadow-strong: 0 3px 12px 0 rgba(29, 29, 27, 0.12);
  /* font-family: 'DM Sans', sans-serif;
    font-family: 'Nunito', sans-serif;
    font-family: 'Roboto', sans-serif;  */
  /*font-family: 'Fira Mono', monospace;*/
  /* font-family: 'Source Sans 3', sans-serif; */
  /*--font-family: 'Fira Sans', sans-serif;*/

  /*************************** MATHS COLORS ***************************/
  /*************************** MATHS COLORS ***************************/
  /*************************** MATHS COLORS ***************************/

  /* Light Mode Colors */

  --innovator-purple: #8a16d8;
  --explorer-teal: #0073ff;
  --thinker-slate: #ff721a;
  --visionary-coral: #f02121;
  --pioneer-mint: #1ab00f;
  --scholar-cream: #b56900;
  --astro-magenta: #ff32af;
  --navigator-blue: #22bbff;

  /* --innovator-purple: #805ad5;
  --explorer-teal: #30999b;
  --thinker-slate: #637381;
  --visionary-coral: #fb7185;
  --pioneer-mint: #68d391;
  --scholar-cream: #bfa58a;
  --astro-magenta: #c8559a;
  --navigator-blue: #31708e; */

  /* --innovator-purple: #ad84ff; */
  /* --explorer-teal: #48edff; */
  /* --thinker-slate: #d4f4ff; */
  /* --visionary-coral: #ffb2b2; */
  /* --pioneer-mint: #aaffc7; */
  /* --scholar-cream: #ffe1b7; */
  /* --astro-magenta: #ff7fcd; */
  /* --navigator-blue: #6ed2ff; */

  /* --innovator-purple: #8b51ff; */
  /* --explorer-teal: #13cee2; */
  /* --thinker-slate: #8ac6db; */
  /* --visionary-coral: #eb6b6b; */
  /* --pioneer-mint: #77ffa6; */
  /* --scholar-cream: #ffcc84; */
  /* --astro-magenta: #ff4cb9; */
  /* --navigator-blue: #37b3eb; */

  /* Alternate Mode Colors for Dark Backgrounds */
  /* --innovator-purple-alt: #9f7aea;
  --explorer-teal-alt: #32a3af;
  --thinker-slate-alt: #8ca1a8;
  --visionary-coral-alt: #feb2b2;
  --pioneer-mint-alt: #9ae6b4;
  --scholar-cream-alt: #d1b996;
  --astro-magenta-alt: #de6fb3;
  --navigator-blue-alt: #5098b8; */

  /* Adjusted colors for visibility on dark background */
  --innovator-purple-alt: #d3afff;
  /* Lightened version of #9f7aea */
  --explorer-teal-alt: #5ce6f1;
  /* Lightened version of #32a3af */
  --thinker-slate-alt: #c7d3d9;
  /* Lightened version of #8ca1a8 */
  --visionary-coral-alt: #ffd6d6;
  /* Lightened version of #feb2b2 */
  --pioneer-mint-alt: #c1ffd1;
  /* Lightened version of #9ae6b4 */
  --scholar-cream-alt: #ffe6b8;
  /* Lightened version of #d1b996 */
  --astro-magenta-alt: #ff92cf;
  /* Lightened version of #de6fb3 */
  --navigator-blue-alt: #7fc1db;
  /* Lightened version of #5098b8 */

  /*************************** TAGS BLOCK ***************************/
  /*************************** TAGS BLOCK ***************************/
  /*************************** TAGS BLOCK ***************************/

  --autumn-yellow-light: #ffe4b5;
  --autumn-orange-light: #f0b27a;
  --autumn-green-light: #9dba53;
  --autumn-blue-light: #89cff0;
  --autumn-red-light: #e9967a;
  --autumn-brown-light: #deb887;
  --autumn-magenta-light: #d8bfd8;
  --autumn-grey-light: #c0c0c0;
  /* Example Light Grey */

  --autumn-red-alt: #5b0404;
  --autumn-orange-alt: #814700;
  --autumn-yellow-alt: #876205;
  --autumn-green-alt: #006400;
  --autumn-blue-alt: #00008b;
  --autumn-brown-alt: #8b4513;
  --autumn-magenta-alt: #8b008b;
  --autumn-grey-alt: #505050;

  /*************************CHAT GPT****************************/

  /* Base Color - Primary Usage */
  --color-purple: #6a1b9a;
  /* Purple - Versatile for backgrounds and buttons */

  /* Complementary Colors */
  --color-cerulean-blue: #1b9ae8;
  /* Cerulean Blue - Ideal for interactive elements */
  --color-cadmium-orange: #f57c00;
  /* Cadmium Orange - Engaging for call to action buttons */

  /* Secondary Actions */
  --color-apple-green: #7cb342;
  /* Apple Green - Secondary buttons or highlights */

  /* Accent Colors for Attention and Alerts */
  --color-carmine-pink: #e53935;
  /* Carmine Pink - Errors or urgent highlights */
  --color-royal-yellow: #fdd835;
  /* Royal Yellow - Warnings or cautions */

  /* Informational Elements */
  --color-dodger-blue: #1e88e5;
  /* Dodger Blue - Information buttons or links */

  /* Highlighting Important Points */
  --color-vivid-violet: #8e24aa;
  /* Vivid Violet - Used to highlight key information */

  /* Links and Icons */
  --color-teal-blue: #00897b;
  /* Teal Blue - Hyperlinks or actionable icons */

  /* Warnings or Highlights */
  --color-amber: #ffb300;
  /* Amber - Highlighting warnings or important notifications */

  --color-light-purple: #f3e5f5;

  /* Colors */

  /* Success Colors */
  --success-light: #e0f2f1;
  --success-bold: #1b5e20;

  /* Warning Colors */
  --warning-light: #fff8e1;
  --warning-bold: #ff6f00;

  /* Danger Colors */
  --danger-light: #ffebee;
  --danger-bold: #b71c1c;

  /* --main-container-width: 720px; */
  --container-outer-width: 740px;
  --container-middle-width: 650px;
  --container-inner-width: 600px;

  /* TO ERASE */
  /* --main-color: #a46dff; */
  --main-color: #3d139c;

  --captain-color: #a46dff;
  --lieutenant-color: #3d139c;
  --sergeant-color: #ff5cd2;
  --soldier-color: #00ada2;
  --genius-color: #db6e00;

  --primary-white: #fff;
  --primary-black: #1d1d1b;

  /*******  COLORFUL  *******/
  --blue-comeau: hsl(255deg, 85%, 30%);
  --color-tertiary-comeau: hsl(255deg, 85%, 30%);

  /*MAIN COLOR*/
  --main-3dom-0: #a46dff;
  --main-3dom-1: #db6e00;
  --main-3dom-2: #00ada2;

  /* Gradient generic */
  /*MAIN COLOR*/
  --main-generic-gradient-0: #a46dff;
  --main-generic-gradient-1: #ff5cd2;
  --main-generic-gradient-2: #ff6d9d;
  --main-generic-gradient-3: #ff9a6f;
  --main-generic-gradient-4: #ff5cd2;
  --main-generic-gradient-5: #ffcc5a;
  --main-generic-gradient-6: #f9f871;

  /* Gradient Shades */
  --main-shades-gradient-0: #a46dff;
  --main-shades-gradient-1: #824fdd;
  --main-shades-gradient-2: #6032bc;
  --main-shades-gradient-3: #3d139c;
  --main-shades-gradient-4: #0f007d;

  /*MAIN COLOR*/
  --main-small-switch-palette-0: #a46dff;
  --main-small-switch-palette-1: #dfedf4;
  --main-small-switch-palette-2: #3b88a2;

  /* Q */
  --gray100: #f1f1f1;
  --gray200: #ebebe8;
  --gray300: #dcdcd9;
  --gray400: #b8b8b5;
  --gray500: #999896;
  --gray600: #636360;

  --gray700: #4a4a48;
  --gray800: #323230;
  --gray900: #1a1a1a;

  --purple50: #efe9fe;
  --purple100: #d5c8fb;
  --purple800: #9b81f6;
  --success50: #e3f8ee;
  --success400: #45b184;
  --warning50: #fff3e5;
  --warning400: #ec9b50;
  --error50: #ffeaed;
  --error400: #f95656;
  --mint50: #dff9f0;
  --mint800: #b0f0da;
  --mustard50: #fdffd0;
  --peach50: #ffeadd;

  --discovery-color-bg: var(--autumn-brown-light);
  --course-color-bg: var(--autumn-red-light);
  --quiz-color-bg: var(--autumn-yellow-light);
  --method-color-bg: var(--autumn-magenta-light);
  --exercise-app-color-bg: var(--autumn-green-light);
  --exercise-prob-color-bg: var(--autumn-blue-light);

  --definition-color-bg: var(--autumn-red-light);
  --exercise-app-color-bg: var(--autumn-green-light);

  --intuition-border-light: #5b9bd5;
  /* Light mode border color */
  --intuition-background-light: #d2dfeb;
  /* Light mode background color #eaf3fc;*/
  --intuition-text-light: #0a2f5a;
  /* Light mode text color */

  --intuition-border-dark: #2878b5;
  /* Dark mode border color */
  --intuition-background-dark: #123b5f;
  /* Dark mode background color */
  --intuition-text-dark: #d9e6f2;
  /* Dark mode text color */

  --color-bold-30: var(--success-bold);
  --color-bold-31: var(--danger-bold);
  --color-bold-32: var(--warning-bold);

  --color-bold-20: var(--success-bold);
  --color-bold-21: var(--danger-bold);
}

/* Styles for narrow viewports */
@media screen and (max-width: 600px) {
  :root {
    --font-size: 1rem;
  }
}

[data-theme="light"] {
  --bg-max: var(--white-pure);

  --intuition-color-border: var(--intuition-border-light);
  --intuition-color-bg: var(--intuition-background-light);
  --intuition-color-text: var(--intuition-text-light);
  /* Main Theme */
  /******************** DAY THEME ********************/

  --color-hard: var(--black-hard);
  --bg-hard: white;
  --color: var(--dark-charcoal);
  --color-secondary: var(--gray500);
  --color-tertiary: var(--gray600);
  --color-quaternary: var(--gray700);
  --color-hover: var(--dark-charcoal);
  --color-icon-hover: var(--color-vivid-violet);

  --bg-hard-l-secondary-d: var(--white-pure);

  --progress-color: var(--soft-dark-gray);

  --bs-color: rgba(149, 157, 165, 0.2);

  /* --bg-color: var(--white-smoke); */
  --bg-color: var(--soft-white);
  /* --bg-color-hover: var(--light-blue); */
  --bg-color-secondary: var(--gray100);

  --bg-color-tertiary: var(--gray300);

  --bg-color-quaternary: var(--gray400);

  --bg-hl: rgb(229 231 235);

  --bg-button-navbar-hover: var(--light-blue);
  --bg-button-navbar-active: var(--mid-blue);

  --color-button-pca: var(--black-hard);

  --bg-button-pca: var(--creamy);
  --bg-button-pca-hover: var(--warm-beige);
  --bd-button-pca: var(--creamy);
  --bd-button-pca-hover: var(--warm-beige);

  --button-pca-bg-light: var(--soft-creamy);

  /* --innovator: #805ad5; */
  /* --explorer: #30999b; */
  /* --thinker: #637381; */
  /* --visionary: #fb7185; */
  /* --pioneer: #68d391; */
  /* --scholar: #bfa58a; */
  /* --astro: #c8559a; */
  /* --navigator: #31708e; */

  --innovator: var(--innovator-purple);
  --explorer: var(--explorer-teal);
  --thinker: var(--thinker-slate);
  --visionary: var(--visionary-coral);
  --pioneer: var(--pioneer-mint);
  --scholar: var(--scholar-cream);
  --astro: var(--astro-magenta);
  --navigator: var(--navigator-blue);

  /* bulma one */
  --link-color: hsl(217, 71%, 53%);

  --link-color: hsl(217, 71%, 45%);

  --keyboard-background-color: var(--button-pca-bg-light);

  --keyboard-background-color: #eef2f8;

  --bg-hard-l-secondary-d-hover: var(--purple50);
  --bg-hard-l-secondary-d-pressed: #bca9e5;

  --color-shadow-1: rgba(100, 100, 111, 0.1);
}

/* Define night theme properties */
[data-theme="dark"] {
  --intuition-color-border: var(--intuition-border-dark);
  --intuition-color-bg: var(--intuition-background-dark);
  --intuition-color-text: var(--intuition-text-dark);

  --color-hard: var(--white-pure);
  --bg-hard: #000000;
  --bg-max: var(--black-hard);

  --color: var(--soft-white);
  --color-secondary: #9e9e9e;

  --color-quaternary: var(--gray200);

  --color-hover: var(--soft-white);
  --color-icon-hover: var(--purple800);

  --bg-color: var(--deep-charcoal);
  --bg-color-secondary: var(--soft-dark-gray);
  --bg-color-tertiary: var(--dark-charcoal);
  --bg-color-quaternary: var(--charcoal);

  --bg-hard-l-secondary-d: var(--bg-color-secondary);

  --progress-color: var(--color-quaternary);

  --bs-color: rgba(39, 45, 52, 0.934);

  --l-secondary-d: var(--bg-color-secondary);

  /* --deep-charcoal: #1a1a1a;
    --soft-dark-gray: #2C2C2C;
    --dark-charcoal: #333;
    --charcoal: #4A4A4A; */

  --bg-button-navbar-hover: var(--soft-dark-gray);

  --color-button-pca: var(--soft-white);
  --bg-button-pca: var(--darker-taupe);
  --bg-button-pca-hover: var(--gray800);
  --bd-button-pca: transparent;
  --bd-button-pca-hover: var(--darker-taupe);

  /* --button-pca-bg-light: var(--dark-charcoal); */
  /* --innovator: #9f7aea; */
  /* --explorer: #32a3af; */
  /* --thinker: #8ca1a8; */
  /* --visionary: #feb2b2; */
  /* --pioneer: #9ae6b4; */
  /* --scholar: #d1b996; */
  /* --astro: #de6fb3; */
  /* --navigator: #5098b8; */

  --innovator: #9f7aea;
  --explorer: #32a3af;
  --thinker: #8ca1a8;
  --visionary: #feb2b2;
  --pioneer: #9ae6b4;
  --scholar: #d1b996;
  --astro: #de6fb3;
  --navigator: #5098b8;

  /* Success Colors */
  --success-bold: #c0f3f1;
  --success-light: #003300;

  /* Warning Colors */
  --warning-bold: #fff8e1;
  --warning-light: #cc8400;

  /* Danger Colors */
  --danger-bold: #ffebee;
  --danger-light: #7f0000;

  --link-color: hsl(219, 71%, 80%);

  --keyboard-background-color: rgb(50, 61, 79) !important;
  --bg-hard-l-secondary-d-hover: var(--main-shades-gradient-3);

  --color-shadow-1: rgba(12, 12, 12, 0.92);

  --method-color-bg: var(--autumn-magenta-alt);

  --definition-color-bg: var(--autumn-red-alt);

  --exercise-app-color-bg: var(--autumn-green-alt);
}