/* Global variables for css styling */
@import url("font.css");

/******************************* ROOT VARIABLES ****************************/

:root {
  --page-bg: #183135;
  --gradient-bg: linear-gradient(#183135 0%, #183135 20%, #30636a 100%);
  --text-color: #cee6e9;
  --text-white: #ffffff;
  --accent-color: #b4f701;
  --accent-lime: #b4f701;
  --nav-bg-scroll: rgba(24, 49, 53, 0.95);
  --nav-dropshadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  --nav-filter-scroll: blur(4px);
  --nav-filter: blur(6px);
  --burger-bg: rgba(255, 255, 255, 0.1);
  --burger-radius: 6px;
  --sweeper-color: rgba(255, 255, 255, 0.9);
  --card-bg: rgba(200, 210, 210, 0.4);
  --logo-lime: #b4f701;


  --fontStyle: "Josefin Sans";

  --font-xs: 0.875rem;
  --font-s: 1rem;
  --font-sm: 1.25rem;
  --font-m: 1.5rem;
  --font-l: 2rem;
  --font-xl: 2.5rem;
  --font-logo: 1.25rem;

  --padding-xs: 0.5rem;
  --padding-s: 1rem;
  --padding-sm: 1.2rem;
  --padding-m: 1.5rem;
  --padding-ml: 1.75rem;
  --padding-l: 2rem;
  --padding-xl: 3rem;
  --padding-xxl: 6rem;

  --margin-xs: 0.5rem;
  --margin-s: 1rem;
  --margin-m: 1.5rem;
  --margin-l: 2rem;
  --margin-xl: 3rem;
  --margin-xxl: 5rem;

  /* Light theme styling */
  --light-page-bg: #cee6e9;
  --light-gradient-bg: linear-gradient(
    to bottom,
    #cee6e9 0%,
    #cee6e9 30%,
    #ffffff 100%
  );
  --light-text-color: #244a50;
  --light-accent-color: #457278;
  --light-theme-accent: #6cb3bc;
  --light-nav-bg-scroll: rgba(206, 230, 233, 0.95);
  --light-nav-dropshadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  --light-burger-bg: rgba(88, 140, 133, 0.115);
  --light-border-bottom: 2px solid rgba(36, 74, 80, 0.3);
  --light-border-top: 1px solid rgba(36, 74, 80, 0.1);
  --light-sweeper-color: rgba(86, 86, 86, 0.9);
  --light-card-bg: rgba(48, 99, 106, 0.4);
  --light-logo: #244a50;

  /* Fixed footer colors */
  --footer-bg: #183135;
  --footer-text: #e8f4f6;
  --footer-accent: #b4f701;

  /* svg's */
  --link-underline-img: url("../img/link_underline.svg");

  /* borders */
  --border-bottom: 2px solid rgba(226, 232, 240, 0.3);
  --border-top: 1px solid rgba(226, 232, 240, 0.1);
}