/* ==========================================================================
bitUI Framework
========================================================================== */

/* Import CSS Files
========================================================================== */
@import url('grid.css');
@import url('layout.css');
@import url('components.css');
@import url('forms.css');
@import url('code.css');
@import url('controlPanel.css');

/* Font Imports
========================================================================== */
@font-face {
  font-family: 'Roboto Mono';
  src: url("../fonts/RobotoMono-VariableFont_wght.ttf") format('truetype');
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto Mono';
  src: url("../fonts/RobotoMono-Italic-VariableFont_wght.ttf") format('truetype');
  font-weight: 100 900;
  font-style: italic;
}
@font-face {
  font-family: 'NotoColorEmojiLimited';
  src: url("../fonts/NotoColorEmoji.ttf") format('truetype');
  unicode-range: U+1F600-U+1F64F;
}

/* Root Variables
  ========================================================================== */
:root {
/* Layout */
--nav-padding: 60px; /* Height of the navbar */
--container-width: 90vw;
--container-min-width:  25rem; /* Prevents content from getting too narrow */
--container-max-width: 110rem; /* 65rem equivalent at 16px base font size */
--min-item-width: 250px; /* Minimum width for grid items */
--column-gap: 0.5rem; /* Default column spacing */
--border-radius: 15px;
--panel-padding-x: 25px; /* Horizontal panel padding */
--panel-padding-y: 15px; /* Vertical panel padding */
/* Typography */
--font-family-base: 'Roboto Mono', 'NotoColorEmojiLimited', monospace;
--font-size-base: 16px;
--font-weight-base: 400;
--line-height-base: 1.4;
/* Default (Light) Theme */
--bg-color: rgb(251, 251, 251);
--text-color: rgb(77, 77, 77);
--heading-color: rgb(46, 46, 46);
--panel-bg: rgb(255, 255, 255);
--panel-dark-bg: rgb(245, 245, 245);
--panel-border: rgb(230, 230, 230);
/* Colors */
--danger: rgba(225, 85, 84, 1);
--danger-hover: rgba(225, 123, 123, 1);
--warning: rgba(255, 165, 0, 1);
--warning-hover: rgba(255, 185, 0, 1);
--confirm: rgba(59, 178, 115, 1);
--confirm-hover: rgba(59, 178, 115, 0.85);
--info: rgba(77, 157, 224, 1);
--info-hover: rgba(77, 163, 234, 1);
}
/* Warm Theme */
[data-theme="warm"] {
--bg-color: rgb(247, 238, 220); /* Pale Sand */
--text-color: rgb(90, 75, 58); /* Soft Umber */
--heading-color: rgb(70, 57, 42); /* Deep Taupe */
--panel-bg: rgb(255, 248, 231); /* Cosmic Latte */
--panel-dark-bg: rgb(233, 222, 202); /* Faded Beige */
--panel-border: #D6C4AE; /* Pale Taupe */
--danger: #D04F47; /* Muted Coral */
--danger-hover: #D76C6C;
--warning: #E89C3C; /* Burnt Sienna */
--warning-hover: #F0B45C;
--confirm: #5A9F60; /* Olive Green */
--confirm-hover: #6CAF77;
--info: #6698C8; /* Muted Azure */
--info-hover: #74A5D3;
}
/* Dim Theme */
[data-theme="dim"] {
--bg-color: rgb(24, 35, 46); /* Gunmetal Blue */
--text-color: rgb(196, 201, 208); /* Cloud Gray */
--heading-color: rgb(208, 213, 220); /* Soft Silver */
--panel-bg: rgb(37, 54, 70); /* Deep Slate */
--panel-dark-bg: rgb(31, 44, 58); /* Slate Blue */
--panel-border: rgb(60, 76, 94); /* Steel Gray */
--danger: #C24C4C; /* Deep Red */
--danger-hover: #D56B6B;
--warning: #D8882F; /* Rustic Gold */
--warning-hover: #E89A45;
--confirm: #368B68; /* Forest Green */
--confirm-hover: #4E9C7D;
--info: #4A85BF; /* Steel Blue */
--info-hover: #5A92CC;
}
/* Dark Theme */
[data-theme="dark"] {
--bg-color: rgb(0, 0, 0);
--text-color: rgb(255, 255, 255);
--heading-color: rgb(179, 179, 179);
--panel-bg: rgb(16, 16, 16);
--panel-dark-bg: rgb(0, 0, 0);
--panel-border: rgb(51, 51, 51);
--danger: #A63C3C; /* Dark Crimson */
--danger-hover: #B85858;
--warning: #CC7A15; /* Deep Amber */
--warning-hover: #D98D30;
--confirm: #2D7559; /* Jade */
--confirm-hover: #3E8B6F;
--info: #3F76A8; /* Midnight Blue */
--info-hover: #4C84B5;
}
/* Base Styles */
html,
body {
  margin: 0 auto;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  background: var(--bg-color);
  color: var(--text-color);
  overflow-x: hidden;
}
/* Transitions */
html, body, .panel { transition: background-color, border-color 0.3s; }
/* Form */
form { padding: 15px 0; }
/* This is to prevent the page from overflowing React */
#root { height: 100vh; }
/* Typography */
h1, h2, h3, h4, h5, h6, p { color: var(--heading-color); }
/* Links */
a { text-decoration: none; color: var(--info); }
a:hover, a:visited { text-decoration: none; color: inherit; }
/* Text Alignment */
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.justify { text-align: justify; }
.float-right { float: right; }
/* Typography Utilities */
.f-light { font-weight: 100; }
.f-regular { font-weight: 400; }
.f-heavy { font-weight: 900; }
.f-small { font-size: calc(var(--font-size-base) * 0.75); }
.f-large { font-size: calc(var(--font-size-base) * 1.25); }
/* Font Colors */
.f-white { color: white; }
.f-black { color: rgba(0, 0, 0, 1); }
.f-danger { color: var(--danger); }
.f-orange { color: var(--orange); }
.f-confirm { color: var(--confirm); }
.f-info { color: var(--info); }
.f-warning { color: var(--warning); }
.f-gray { color: gray; }