/* COLORS */

:root {
  --black: #1a1c1e;
  --white: #ffffff;

  --transparent-white: #ffffffcc;
  --transparent-grey: #7f766b33;
  --transparent-black: #1a1c1e33;

  --primary-90: #cde5ff;
  --primary-80: #95ccff;
  --primary-70: #4cb2ff;
  --primary-40: #006399;
  --primary-30: #004a75;
  --primary-20: #003352;
  --primary-10: #001d32;

  --secondary-90: #d0e5fb;
  --secondary-80: #b5c9df;
  --secondary-40: #4d6073;
  --secondary-30: #36495b;
  --secondary-10: #081d2d;

  --tertiary-90: #eedcff;
  --tertiary-80: #d4bdee;
  --tertiary-40: #695681;
  --tertiary-30: #4f4061;
  --tertiary-20: #3a2850;
  --tertiary-10: #241339;

  --neutral-90: #e2e2e5;
  --neutral-80: #c6c6c9;
  --neutral-30: #45474a;
  --neutral-10: #1a1c1e;

  --neutral-variant-90: #dee3eb;
  --neutral-variant-80: #c2c7cf;
  --neutral-variant-40: #595f66;
  --neutral-variant-30: #42474e;
  --neutral-variant-10: #171c22;
}

:root {
  --github-bg-light: #5f5e5e;
  --github-bg-dark: #c8c6c5;
  --github-text-light: #fff;
  --github-text-dark: #303030;

  --devto-bg-light: #5e5e5e;
  --devto-bg-dark: #c6c6c6;
  --devto-text-light: #fff;
  --devto-text-dark: #303030;
}

/* LIGHT THEME */

[theme="light"] {
  --standard-text: var(--black);
  --cursor: var(--tertiary-20);
  --page-bg: var(--white);
  --navgroup-bg: var(--neutral-variant-90);
  --card: var(--neutral-variant-90);
  --card-hover: var(--tertiary-80);
  --card-links: var(--neutral-variant-10);
  --card-links-hover: var(--tertiary-20);
  --card-infos-hover: var(--tertiary-20);
  --mobile-navbar-bg: var(--transparent-white);
  --on-navgroup: var(--neutral-variant-10);
  --selected-navgroup: var(--primary-80);
  --on-selected-navgroup: var(--primary-20);
  --hover-navgroup: var(--neutral-variant-80);
  --home-title-bg: var(--primary-90);
  --home-on-title: var(--primary-10);
  --repos-title-bg: var(--tertiary-90);
  --repos-on-title: var(--tertiary-10);
  --info-title-bg: var(--secondary-90);
  --info-on-title: var(--secondary-10);
  --contact-title-bg: var(--neutral-90);
  --contact-on-title: var(--neutral-10);
}

[theme="light"] {
  --github-bg: var(--github-bg-light);
  --github-text: var(--github-text-light);
  --devto-bg: var(--devto-bg-light);
  --devto-text: var(--devto-text-light);
}

/* DARK THEME */

[theme="dark"] {
  --standard-text: var(--white);
  --cursor: var(--tertiary-80);
  --page-bg: var(--black);
  --navgroup-bg: var(--neutral-variant-30);
  --card: var(--neutral-variant-30);
  --card-hover: var(--tertiary-30);
  --card-links: var(--neutral-variant-90);
  --card-links-hover: var(--tertiary-90);
  --card-infos-hover: var(--tertiary-90);
  --mobile-navbar-bg: var(--transparent-black);
  --on-navgroup: var(--neutral-variant-90);
  --selected-navgroup: var(--primary-30);
  --on-selected-navgroup: var(--primary-90);
  --hover-navgroup: var(--neutral-variant-40);
  --home-title-bg: var(--primary-30);
  --home-on-title: var(--primary-90);
  --repos-title-bg: var(--tertiary-30);
  --repos-on-title: var(--tertiary-90);
  --info-title-bg: var(--secondary-30);
  --info-on-title: var(--secondary-90);
  --contact-title-bg: var(--neutral-30);
  --contact-on-title: var(--neutral-90);
}

[theme="dark"] {
  --github-bg: var(--github-bg-dark);
  --github-text: var(--github-text-dark);
  --devto-bg: var(--devto-bg-dark);
  --devto-text: var(--devto-text-dark);
}

/* INVERTED ROUNDED CORNERS MASKS */

:root {
  --topleft-mask: radial-gradient(
    var(--border-radius-m) at 100% 100%,
    #0000 100%,
    #000
  );
  --topright-mask: radial-gradient(
    var(--border-radius-m) at 0 100%,
    #0000 100%,
    #000
  );
  --bottomleft-mask: radial-gradient(
    var(--border-radius-m) at 100% 0,
    #0000 100%,
    #000
  );
  --bottomright-mask: radial-gradient(
    var(--border-radius-m) at 0 0,
    #0000 100%,
    #000
  );
  --logo-mask: url("../res/img/logoMask.svg");
}

/* OTHER VARIABLES */

/* BORDER RADIUS SIZES */

:root {
  --border-radius-xa: 1.2rem;
  --border-radius-s: 1.6rem;
  --border-radius-m: 2rem;
  --border-radius-l: 2.4rem;
  --border-radius-xl: 3rem;
}

/* FONT SIZES */

:root {
  --font-size-s: 1.4rem;
  --font-size-m: 2.2rem;
  --font-size-l: 4.8rem;
  --font-size-xl: 6.4rem;
  --font-size-header: 1.8rem;
}