h1, h2{
    font-family: "Bree Serif", serif;
    font-weight: 400;
    font-style: normal;
}

body{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.bree-serif-regular {
    font-family: "Bree Serif", serif;
    font-weight: 400;
    font-style: normal;
}
  

/*
<uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 100 to 700
*/

.roboto-mono{
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}


.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
}



/* =====================================================
   Code Hideout - Custom Ember Theme
   ===================================================== */

/* ---------- Root Variables ---------- */
:root {
  --ember: #BF4011; /* Main brand color for Code Hideout */
}

/* ---------- Text, Background, and Border Utilities ---------- */
/* Text colored in Ember */
.text-ember {
  color: var(--ember) !important;
}

/* Background colored in Ember */
.bg-ember {
  background-color: var(--ember) !important;
}

/* Border colored in Ember */
.border-ember {
  border-color: var(--ember) !important;
}

/* ---------- Ember Buttons ---------- */
:root {
  --ember: #BF4011;
  --ember-dark: #962f00;
  --ember-light: #f9e5da;
}



/* Base Ember button */
.btn-ember {
  display: inline-block;
  font-weight: 400;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: var(--ember);
  border: 1px solid var(--ember);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  cursor: pointer;
  text-decoration: none;
}

/* Sizes for Ember buttons */
.btn-ember-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.btn-ember-lg { padding: 0.5rem 1rem; font-size: 1.25rem; }

/* Hover & active states for filled Ember */
.btn-ember:hover,
.btn-ember:active {
  background-color: var(--ember-dark);
  border-color: var(--ember-dark);
  color: #fff;
}

/* Outline Ember button */
.btn-outline-ember {
  color: var(--ember);
  background-color: transparent;
  border: 1px solid var(--ember);
}
.btn-outline-ember:hover,
.btn-outline-ember:active {
  color: #fff;
  background-color: var(--ember);
  border-color: var(--ember);
}

/* Disabled Ember buttons */
.btn-ember:disabled,
.btn-outline-ember:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Focus state (just a border color, no effects) */
.btn-ember:focus,
.btn-outline-ember:focus {
  outline: none;
  border-color: var(--ember-dark);
}

/* Block Ember buttons */
.btn-ember-block { display: block; width: 100%; }

/* ---------- Links ---------- */

/* Custom Ember link class */
.link-ember {
  color: var(--ember); /* Default Ember color */
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

/* Hover/focus state for Ember links */
.link-ember:hover,
.link-ember:focus {
  color: #962f00; /* Darker Ember on hover/focus */
  /* text-decoration: underline; Optional */
}

/* Optional: make all <a> links Ember by default */
a {
  color: var(--ember);
  text-decoration: none;
}
a:hover,
a:focus {
  color: #962f00;
  /* text-decoration: underline; Optional */
}