/*-----------------------------------*\
 * #GLOBAL PROPERTY
\*-----------------------------------*/

:root {
  /**
     * colors
     */
  --raw-seinna: var(--color-light-purple);
  --raw-seinna-gradient: linear-gradient(
    -45deg,
    var(--color-light-blue),
    var(--color-light-purple)
  );
  --raw-seinna-shadow: rgba(
    var(--color-light-purple-r, 207),
    var(--color-light-purple-g, 89),
    var(--color-light-purple-b, 230),
    0.6
  );
  --raw-seinna-light-shadow: rgba(
    var(--color-light-blue-r, 107),
    var(--color-light-blue-g, 197),
    var(--color-light-blue-b, 248),
    0.4
  );
  --raw-seinna-alternate: var(--color-light-blue);
  --sizzling-sunrise: hsl(51, 95%, 54%);
  --scarlet: hsl(13, 96%, 47%);
  --black: hsl(0, 0%, 0%);
  --white: hsl(0, 0%, 100%);

  /* loading screen */
  --main-color: #aba1ff;
  --main-color-dark: #675fb2;
  --ray-color: #ffd6bb;
  --spark-color: #70b268;
  --back-color: #2f2e4e;

  /* footer */
  cursor: default;
  --color-white: #fff;
  --color-black: #000;
  --color-light-purple: #cf59e6;
  --color-light-blue: #6bc5f8;
  --tech-stack-box-border-color: #292929;

   /* Static colors */
   --static-heading-gradient-blue: #b0f3f1;
   --static-heading-gradient-pink: #ffcfdf;
   --tech-stack-box-first-color: #1a1a29;
   --tech-stack-box-second-color: rgba(27, 27, 40, 0);

  /**
     * typography
     */
  --ff-saira-stencil-one: "Saira Stencil One", sans-serif;
  --ff-poppins: "Poppins", sans-serif;
  --ff-roboto: "Roboto", sans-serif;

  --fs-1: 2rem;
  --fs-2: calc(1.813rem + 1vw);
  --fs-3: calc(1.313rem + 1vw);
  --fs-4: 1.4rem;
  --fs-5: 1rem;
  --fs-6: 0.813rem;
  --fs-7: 0.75rem;

  --fw-400: 400;
  --fw-700: 700;

  /**
     * transition
     */
  --transition-1: 0.25s ease-in-out;

  /**
     * spacing
     */
  --section-padding: 80px;

  /**
     * radius
     */
  --radius-4: 4px;
  --radius-12: 12px;
}

body.dark_theme {
  --bg-primary: hsl(0, 0%, 12%);
  --bg-secondary: hsl(0, 0%, 19%);
  --color-primary: hsl(0, 0%, 100%);
  --color-secondary: hsl(0, 0%, 62%);
  --card-shadow: hsla(0, 0%, 100%, 0.2);
  --input-bg: hsl(0, 0%, 16%);

  --shadow-1: 10px 10px 40px var(--card-shadow);
}

body.light_theme {
  --bg-primary: hsl(0, 0%, 90%);
  --bg-secondary: hsl(0, 0%, 100%);
  --color-primary: hsl(0, 0%, 12%);
  --color-secondary: hsl(0, 0%, 37%);
  --card-shadow: hsla(0, 0%, 0%, 0.1);
  --input-bg: hsl(0, 0%, 93%);

  --shadow-1: 10px 10px 40px var(--card-shadow);

  /* Light theme specific overrides */
  --color-light-blue: #004e80;
  --tech-stack-box-border-color: #e0e0e0;
  --static-heading-gradient-blue: #80e1ff;
  --static-heading-gradient-pink: #ff99cc;
  --tech-stack-box-first-color: #e0e0e0;
  --tech-stack-box-second-color: #f7f7f7;
}