/* This file is an amalgam of variables contained in:
      - typography.css
      - whitespace.css
      - colors.css
      - resets.css
Modifications done to the above files should be followed up by applying the corresponding changes to this file.
It is a dependency to other css files.
It should be included in all html files rely on css stylesheets that use these variables.
*/

/* Typography Variables*/
:root {
  font-size: 16px;
  --font-family: "Inter", "Lexend", Arial, Helvetica, sans-serif;
  --heading-2xl: 700 3rem/1.1 var(--font-family);
  --heading-xl: 700 2.5rem/1.1 var(--font-family);
  --heading-l: 700 2.25rem/1.1 var(--font-family);
  --heading-m: 700 2rem/1.1 var(--font-family);
  --heading-s: 700 1.75rem/1.15 var(--font-family);
  --heading-xs: 700 1.5rem/1.3 var(--font-family);
  --heading-2xs: 700 1.25rem/1.35 var(--font-family);
  --paragraph-bold: 700 1rem/1.5 var(--font-family);
  --paragraph: 400 1rem/1.5 var(--font-family);
  --paragraph-small: 400 0.875rem/1.55 var(--font-family);
  --button-text: 700 1.25rem/1 var(--font-family);
  --label-text: 300 0.875rem/1.6 var(--font-family);
}

/* White space variables */
:root {
  /* small spaces
  Increase by 4px */
  --spacing-0: 0rem;
  --spacing-s4: 0.25rem;
  --spacing-s8: 0.5rem;
  --spacing-s12: 0.75rem;
  --spacing-s16: 1rem;
  --spacing-s20: 1.25rem;
  --spacing-s24: 1.5rem;
  --spacing-s28: 1.75rem;
  --spacing-s32: 2rem;

  /* big spaces 
        Increase exponentially*/
  --spacing-b40: 2.5rem;
  --spacing-b60: 3.75rem;
  --spacing-b100: 6.25rem;
  --spacing-b160: 10rem;
  --spacing-b256: 16rem;
}

/* Color theming variables */

:root {
  /* Backgrounds */
  --color-bg-primary: linear-gradient(
    135deg,
    hsla(231, 100%, 12%, 1) 0%,
    hsla(231, 80%, 18%, 1) 100%
  );
  --color-bg-secondary: hsla(231, 85%, 18%, 1);
  --color-bg-surface: hsla(231, 65%, 22%, 1);

  /* Text */
  --color-text-primary: hsla(231, 90%, 98%, 1);
  --color-text-body: hsla(231, 40%, 92%, 1);
  --color-text-muted: hsla(231, 35%, 70%, 1);
  --color-text-invert: hsla(231, 95%, 8%, 1);
  --color-text-accent: hsla(33, 100%, 51%, 1);
  --color-text-heading: hsl(33, 70%, 70%);

  /* Buttons */
  --color-btn-primary-bg: hsla(231, 80%, 42%, 1);
  --color-btn-primary-hover: hsla(231, 80%, 50%, 1);
  --color-btn-primary-active: hsla(231, 80%, 35%, 1);
  --color-btn-primary-text: hsla(231, 100%, 98%, 1);

  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: hsla(231, 75%, 75%, 1);
  --color-btn-secondary-hover: hsla(231, 70%, 25%, 1);
  --color-btn-secondary-active: hsla(231, 70%, 20%, 1);
  --color-btn-secondary-text: hsla(231, 85%, 95%, 1);

  --color-btn-accent-bg: hsla(33, 100%, 51%, 1);
  --color-btn-accent-hover: hsla(33, 100%, 56%, 1);
  --color-btn-accent-active: hsla(33, 100%, 46%, 1);
  --color-btn-accent-text: hsla(231, 100%, 10%, 1);

  /* Links */
  --color-link: hsla(231, 95%, 95%, 1);
  --color-link-hover: hsla(231, 100%, 100%, 1);
  --color-link-visited: hsla(231, 70%, 55%, 1);
  --color-link-active: hsla(33, 100%, 51%, 1);

  /* Borders */
  --color-border-default: hsla(231, 35%, 28%, 1);
  --color-border-hover: hsla(231, 50%, 38%, 1);
  --color-border-focus: hsla(231, 85%, 60%, 1);
  --color-border-accent: hsla(33, 100%, 51%, 1);
  --color-border-muted: hsla(231, 20%, 18%, 1);

  /* Shadows */
  --shadow-sm: 0 1px 3px hsla(231, 50%, 15%, 0.4);
  --shadow-md: 0 4px 10px hsla(231, 50%, 12%, 0.5);
  --shadow-lg: 0 8px 24px hsla(231, 50%, 8%, 0.6);
  --shadow-accent: 0 0 12px hsla(33, 100%, 51%, 0.67);

  /* Status Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
}

:root.light {
  /* Backgrounds */
  --color-bg-primary: linear-gradient(
    135deg,
    hsla(231, 100%, 98%, 1) 0%,
    hsla(231, 80%, 95%, 1) 100%
  );
  --color-bg-secondary: hsla(231, 40%, 96%, 1);
  --color-bg-surface: hsla(231, 30%, 98%, 1);

  /* Text */
  --color-text-primary: hsla(231, 40%, 12%, 1);
  --color-text-body: hsla(231, 20%, 25%, 1);
  --color-text-muted: hsla(231, 25%, 40%, 1);
  --color-text-invert: hsla(231, 90%, 98%, 1);
  --color-text-accent: hsla(33, 100%, 0, 1);
  --color-text-heading: hsl(33, 80%, 35%);

  /* Buttons */
  --color-btn-primary-bg: hsla(231, 80%, 45%, 1);
  --color-btn-primary-hover: hsla(231, 80%, 50%, 1);
  --color-btn-primary-active: hsla(231, 80%, 40%, 1);
  --color-btn-primary-text: hsla(231, 100%, 98%, 1);

  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: hsl(231, 55%, 50%);
  --color-btn-secondary-hover: hsla(231, 45%, 92%, 1);
  --color-btn-secondary-active: hsla(231, 40%, 88%, 1);
  --color-btn-secondary-text: hsla(231, 40%, 20%, 1);

  --color-btn-accent-bg: hsla(33, 100%, 51%, 1);
  --color-btn-accent-hover: hsla(33, 100%, 56%, 1);
  --color-btn-accent-active: hsla(33, 100%, 46%, 1);
  --color-btn-accent-text: hsla(0, 0%, 100%, 1);

  /* Links */
  --color-link: hsla(231, 100%, 60%, 1);
  --color-link-hover: hsla(231, 80%, 35%, 1);
  --color-link-visited: hsla(231, 60%, 35%, 1);
  --color-link-active: hsla(33, 100%, 51%, 1);

  /* Borders */
  --color-border-default: hsla(231, 20%, 80%, 1);
  --color-border-hover: hsla(231, 30%, 70%, 1);
  --color-border-focus: hsla(231, 60%, 55%, 1);
  --color-border-accent: hsla(33, 100%, 51%, 1);
  --color-border-muted: hsla(231, 15%, 90%, 1);

  /* Shadows */
  --shadow-sm: 0 1px 3px hsla(231, 20%, 20%, 0.1);
  --shadow-md: 0 4px 10px hsla(231, 20%, 20%, 0.15);
  --shadow-lg: 0 8px 24px hsla(231, 20%, 20%, 0.2);
  --shadow-accent: 0 0 12px hsla(33, 100%, 51%, 0.5);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

* {
  font-family: var(--font-family);
}

a {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

html,
body {
  height: 100%;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-s16);
}

.brand {
  font-family: "Audiowide", sans-serif;
  font-weight: 500;
}

.material-icons,
.icon {
  font-size: inherit;
  vertical-align: middle;
}