/* ===============================
   SPACE SCHEME
   =============================== */
/* 
section -> py-10 px-3 px-sm-4 px-md-5
h1 -> mb-5
sections of text -> mb-5
h2 -> mb-4
h3, h4, h5, h6 -> m3-4
inside cells/cards
p -> mb-2

 */

/* ===============================
   RESET + VARIABLES
   =============================== */
:root {
  /* Accent colors */
  --yellow: rgb(255, 215, 96);
  --yellow-alt: rgb(253, 193, 98);
  --purple: rgb(191, 147, 220);
  --purple-alt: rgb(203, 122, 220);
  --blue: rgb(83, 186, 241);
  --blue-alt: rgb(109, 232, 236);
  --green: rgb(104, 222, 141);
  --green-alt: rgb(144, 215, 125);

  /* Text colors */
  --black: #1a1a1a;
  --dark-grey: #333333;
  --white: #f9f9f9;

  --yellow-dark: rgb(179, 150, 39);
  --purple-dark: rgb(108, 62, 143);
  --blue-dark: rgb(22, 99, 145);
  --green-dark: rgb(25, 133, 66);

  /* Text Backgrounds */
  --text-background: rgba(255, 255, 255, 0.6);

  /* Background colors */
  --bg-light-yellow: #fffcef;
  --bg-light-purple: #f4e9f8;

  --yellow-translucent: rgba(255, 215, 96, 0.5);
  --purple-translucent: rgba(191, 147, 220, 0.5);
  --blue-translucent: rgba(83, 186, 241, 0.5);
  --green-translucent: rgba(104, 222, 141, 0.5);

  /* Typography */
  --font-primary: 'Open Sans', sans-serif;
  --font-secondary: 'Poppins', sans-serif;

  /* Gradients */
  --gradient-green: linear-gradient(to bottom right, var(--green), var(--green-alt));
  --gradient-yellow: linear-gradient(to bottom right, var(--yellow), var(--yellow-alt));
  --gradient-purple: linear-gradient(to bottom right, var(--purple), var(--purple-alt));
  --gradient-blue: linear-gradient(to bottom right, var(--blue), var(--blue-alt));

  --gradient-all: linear-gradient(to bottom, var(--yellow), var(--purple), var(--blue), var(--green));
  --gradient-bg: linear-gradient(to bottom right, var(--bg-light-yellow), var(--bg-light-purple));
}

/* TODO - change the names of these classes, and introduce more of them... */
.bg-yellow-gradient { background: var(--gradient-yellow); }
.bg-purple-gradient { background: var(--gradient-purple); }
.bg-blue-gradient { background: var(--gradient-blue); }
.bg-green-gradient { background: var(--gradient-green); }

.bg-all-gradient { background: var(--gradient-all); }
.bg-gradient-bg { background: var(--gradient-bg); }

.bg-yellow-translucent { background: var(--yellow-translucent); }
.bg-purple-translucent { background: var(--purple-translucent); }
.bg-blue-translucent { background: var(--blue-translucent); }
.bg-green-translucent { background: var(--green-translucent); }

.border-yellow { border: 2px solid var(--yellow); }
.border-purple { border: 2px solid var(--purple); }
.border-blue { border: 2px solid var(--blue); }
.border-green { border: 2px solid var(--green); }

.outline-yellow:focus { border-color: var(--yellow); box-shadow: 0 0 0.25rem 0.25rem var(--yellow); }
.outline-purple:focus { border-color: var(--purple); box-shadow: 0 0 0.25rem 0.25rem var(--purple); }
.outline-blue:focus { border-color: var(--blue); box-shadow: 0 0 0.25rem 0.25rem var(--blue); }
.outline-green:focus { border-color: var(--green); box-shadow: 0 0 0.25rem 0.25rem var(--green); }

.color-yellow { color: var(--yellow); }
.color-purple { color: var(--purple); }
.color-blue { color: var(--blue); }
.color-green { color: var(--green); }

.max-width-1200 { max-width: 1200px; }
.max-width-900 { max-width: 900px; }
.max-width-600 { max-width: 600px; }

/* ===============================
   CSS RESET (modernized)
   =============================== */

/* Reset box-sizing */
*, *::before, *::after { box-sizing: border-box; }

/* Remove default margins/padding so Bootstrap utilities control spacing */
* { margin: 0; padding: 0; }

/* Set base font + smoothing */
html, body { font-family: var(--font-primary); color: var(--black); }

section { overflow-x: hidden; }

/* Headings */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-secondary); font-weight: normal; color: var(--dark-grey); }

/* Links */
a { color: var(--black); text-decoration: none; }
a:hover { text-decoration: none; }

/* Buttons (do not change colors) */
button, .btn { font-family: var(--font-primary); border: none; cursor: pointer; }

/* Inputs & forms */
input, textarea, select { font-family: var(--font-primary); }

.full-height { margin-top: 88px; min-height: calc(100vh - 88px); }
















/* Additonal Bootstrap Spacing */

/* ===== PADDING ===== */
.p-6  { padding: 4rem !important; }
.pt-6 { padding-top: 4rem !important; }
.pb-6 { padding-bottom: 4rem !important; }
.ps-6 { padding-left: 4rem !important; }
.pe-6 { padding-right: 4rem !important; }
.px-6 { padding-left: 4rem !important; padding-right: 4rem !important; }
.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

.p-7  { padding: 5rem !important; }
.pt-7 { padding-top: 5rem !important; }
.pb-7 { padding-bottom: 5rem !important; }
.ps-7 { padding-left: 5rem !important; }
.pe-7 { padding-right: 5rem !important; }
.px-7 { padding-left: 5rem !important; padding-right: 5rem !important; }
.py-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }

.p-8  { padding: 6rem !important; }
.pt-8 { padding-top: 6rem !important; }
.pb-8 { padding-bottom: 6rem !important; }
.ps-8 { padding-left: 6rem !important; }
.pe-8 { padding-right: 6rem !important; }
.px-8 { padding-left: 6rem !important; padding-right: 6rem !important; }
.py-8 { padding-top: 6rem !important; padding-bottom: 6rem !important; }

.p-9  { padding: 7rem !important; }
.pt-9 { padding-top: 7rem !important; }
.pb-9 { padding-bottom: 7rem !important; }
.ps-9 { padding-left: 7rem !important; }
.pe-9 { padding-right: 7rem !important; }
.px-9 { padding-left: 7rem !important; padding-right: 7rem !important; }
.py-9 { padding-top: 7rem !important; padding-bottom: 7rem !important; }

.p-10  { padding: 8rem !important; }
.pt-10 { padding-top: 8rem !important; }
.pb-10 { padding-bottom: 8rem !important; }
.ps-10 { padding-left: 8rem !important; }
.pe-10 { padding-right: 8rem !important; }
.px-10 { padding-left: 8rem !important; padding-right: 8rem !important; }
.py-10 { padding-top: 8rem !important; padding-bottom: 8rem !important; }

/* ===== MARGIN ===== */
.m-6  { margin: 4rem !important; }
.mt-6 { margin-top: 4rem !important; }
.mb-6 { margin-bottom: 4rem !important; }
.ms-6 { margin-left: 4rem !important; }
.me-6 { margin-right: 4rem !important; }
.mx-6 { margin-left: 4rem !important; margin-right: 4rem !important; }
.my-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }

.m-7  { margin: 5rem !important; }
.mt-7 { margin-top: 5rem !important; }
.mb-7 { margin-bottom: 5rem !important; }
.ms-7 { margin-left: 5rem !important; }
.me-7 { margin-right: 5rem !important; }
.mx-7 { margin-left: 5rem !important; margin-right: 5rem !important; }
.my-7 { margin-top: 5rem !important; margin-bottom: 5rem !important; }

.m-8  { margin: 6rem !important; }
.mt-8 { margin-top: 6rem !important; }
.mb-8 { margin-bottom: 6rem !important; }
.ms-8 { margin-left: 6rem !important; }
.me-8 { margin-right: 6rem !important; }
.mx-8 { margin-left: 6rem !important; margin-right: 6rem !important; }
.my-8 { margin-top: 6rem !important; margin-bottom: 6rem !important; }

.m-9  { margin: 7rem !important; }
.mt-9 { margin-top: 7rem !important; }
.mb-9 { margin-bottom: 7rem !important; }
.ms-9 { margin-left: 7rem !important; }
.me-9 { margin-right: 7rem !important; }
.mx-9 { margin-left: 7rem !important; margin-right: 7rem !important; }
.my-9 { margin-top: 7rem !important; margin-bottom: 7rem !important; }

.m-10  { margin: 8rem !important; }
.mt-10 { margin-top: 8rem !important; }
.mb-10 { margin-bottom: 8rem !important; }
.ms-10 { margin-left: 8rem !important; }
.me-10 { margin-right: 8rem !important; }
.mx-10 { margin-left: 8rem !important; margin-right: 8rem !important; }
.my-10 { margin-top: 8rem !important; margin-bottom: 8rem !important; }