/* Light Theme (Default) */
:root {
  --root-font-size: 12pt; /* 14px */
  /* Typography */
  --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-size-small: 9pt; /* 12px */
  --font-size-medium: 12pt; /* 16px */
  --font-size-large: 15pt; /* 20px */
  --font-size-xlarge: 18pt; /* 24px */
  --line-height-small: 1.4;
  --line-height-medium: 1.5;
  --line-height-large: 1.6;

  /* Colors */
  --color-primary: #007aff; /* iOS blue */
  --color-primary-rgb: 0, 122, 255; /* RGB values for opacity */
  --color-secondary: #5856d6; /* iOS purple */
  --color-background: #f2f2f7; /* iOS light gray */
  --color-text-primary: #000000; /* Black */
  --color-text-secondary: #696969; /* Secondary text */
  --color-border: #c6c6c8; /* Border gray */

  --color-success: #28cd41; /* Success green */
  --color-success-rgb: 40, 205, 65;
  --color-warning: #ffcc00; /* Warning yellow */
  --color-warning-rgb: 255, 204, 0;
  --color-danger: #ff3b30; /* Danger red */
  --color-danger-rgb: 255, 59, 48;
  --color-info: #007aff; /* Info blue */
  --color-info-rgb: 0, 122, 255;
  --color-light: #f2f2f7; /* Light gray */
  --color-dark: #000000; /* Dark black */
  --color-white: #ffffff; /* White */
  --color-black: #000000; /* Black */

  /* Spacing */
  --spacing-small: 3pt; /* 4px */
  --spacing-medium: 6pt; /* 8px */
  --spacing-large: 12pt; /* 16px */
  --spacing-xlarge: 18pt; /* 24px */

  /* Mask */
  --mask-color: rgba(0, 0, 0, 0.2); /* Semi-transparent black */
  --shadow-drop: 0px 1.5pt 3pt rgba(0, 0, 0, 0.1); /* Drop shadow */
}

/* Dark Theme */
[data-theme="dark"] {
  /* Colors */
  --color-primary: #0a84ff;
  --color-primary-rgb: 10, 132, 255;
  --color-secondary: #5e5ce6;
  --color-background: #424242;
  --color-text-primary: #ffffff;
  --color-text-secondary: #cecece;
  --color-border: #7f7f7f;

  --color-success: #32d74b;
  --color-success-rgb: 50, 215, 75;
  --color-warning: #ffd60a;
  --color-warning-rgb: 255, 214, 10;
  --color-danger: #ff453a;
  --color-danger-rgb: 255, 69, 58;
  --color-info: #0a84ff;
  --color-info-rgb: 10, 132, 255;
  --color-light: #2c2c2e;
  --color-dark: #ffffff;
  --color-white: #000000;
  --color-black: #ffffff; /* Set color-black to white */

  /* Mask */
  --mask-color: rgba(0, 0, 0, 0.4);
  --shadow-drop: 0px 1.5pt 3pt rgba(0, 0, 0, 0.2);
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-system);
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-size: var(--root-font-size);
}
body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  height: 100vh;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

h1,
h2,
h3,
h4,
h5,
h6, p {
  margin: 0;
  padding: 0;
}

hr {
  border: none;
  border-top: 0.75pt solid var(--color-border);
  margin: 0;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--mask-color);
  z-index: var(--z-100, 100);
  display: none;
}

.mask.show {
  display: block;
}

/* bootsrap container */
.container {
  width: 100%;
  max-width: 100%;
  padding-right: var(--spacing-medium);
  padding-left: var(--spacing-medium);
  margin-right: auto;
  margin-left: auto;
}
.container-fluid {
  width: 100%;
  padding-right: var(--spacing-medium);
  padding-left: var(--spacing-medium);
  margin-right: auto;
  margin-left: auto;
}
/* Responsive breakpoints */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}
@media (min-width: 1600px) {
  .container {
    max-width: 1500px;
  }
}
@media (min-width: 1800px) {
  .container {
    max-width: 1680px;
  }
}
@media (min-width: 2000px) {
  .container {
    max-width: 1920px;
  }
}