@charset "UTF-8";
/* main.scss — imports for project partials
   Updated to include the created partials (excludes sidebar, footer, cards, functions per request).
*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* _typography.scss — typography rules (placeholder) */
body {
  font-family: "Kumbh Sans", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
  line-height: 1.4;
  color: #222;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

.tab-font {
  color: #d7e0ff;
  text-align: center;
  font-family: inherit;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

h1 {
  color: var(--colors-blue-100, #d7e0ff);
  text-align: center;
  font-family: inherit;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.timer-font {
  color: var(--colors-blue-100, #d7e0ff);
  text-align: center;
  /* Text Preset 1 (Mobile, Font 2) - Roboto Slab Bold - 80px - 133% Line Height - -5px Line Spacing */
  font-family: "Roboto Slab";
  font-size: 5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 133%; /* 6.65rem */
}

.pause-font {
  color: var(--colors-blue-100, #d7e0ff);
  text-align: center;
  /* Text Preset 2 (Mobile, Font 2) - Roboto Slab Bold - 14px - 130% Line Height - 13px Line Spacing */
  font-family: inherit;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 1.1375rem */
  letter-spacing: 0.8125rem;
  align-self: stretch;
  text-transform: uppercase;
}

body {
  height: 100vh;
  width: 100%;
  background-color: #1e213f;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}

.app {
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  position: relative;
}

body {
  transition: font-family 0.3s ease;
}

/* Font families */
.font--kumbh {
  font-family: "Kumbh Sans", sans-serif;
}

.font--roboto {
  font-family: "Roboto Slab", serif;
}

.font--space {
  font-family: "Space Mono", monospace;
}

:root {
  --accent-color: #70f3f8;
}

/* _normalize.scss — third-party overrides / normalize placeholder */
/* Minimal normalize placeholder */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* _buttons.scss — button styles (placeholder) */
.setting-button {
  width: 1.6875rem;
  height: 1.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.setting-button:hover {
  opacity: 0.7;
  transform: scale(1.05);
}
.setting-button:active {
  opacity: 0.9;
  transform: scale(0.95);
}

/* ===== TOOLTIP STYLES ===== */
[data-tooltip] {
  position: relative;
  cursor: pointer;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 110%; /* appears above element */
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* _navbars.scss — navbar styles (placeholder)
   Restored to satisfy imports in scss/main.scss
*/
.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav__item {
  list-style: none;
}

/* _header.scss — header layout (placeholder) */
.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.tab-group {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #161932;
  gap: 8px;
  padding-inline: 0.5rem;
  border-radius: 999px;
  height: 4rem;
}

.tab-options {
  /*  background-color: $red-400; */
  border-radius: 999px;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6.5625rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  z-index: 20;
}

/* _grid.scss — simple grid utilities (restored)
*/
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.timer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 18.75rem;
}
@media (min-width: 768px) {
  .timer-container {
    width: 25.625rem;
  }
}
@media (min-width: 1440px) {
  .timer-container {
    width: 25.625rem;
  }
}

.timer-display {
  width: 18.75rem;
  height: 18.75rem;
  border-radius: 999px;
  background: var(--colors-gradient-1, linear-gradient(271deg, #2e325a 0%, #0e112a 100%));
  box-shadow: -50px -50px 100px 0 #272c5a, 50px 50px 100px 0 #121530;
  /* make the circle a flex container so its contents can be centered */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) {
  .timer-display {
    width: 25.625rem;
    height: 25.625rem;
  }
}

.outer-border {
  width: 16.73781rem;
  height: 16.73781rem;
  flex-shrink: 0;
  border-radius: 16.73781rem;
  background: #161932;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .outer-border {
    width: 22.875rem;
    height: 22.875rem;
    flex-shrink: 0;
  }
}

.progress-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15.50306rem;
  height: 15.50306rem;
}
@media (min-width: 768px) {
  .progress-bar {
    width: 21.1875rem;
    height: 21.1875rem;
    flex-shrink: 0;
  }
}

.timer {
  width: 11.9375rem;
}

.setting {
  margin-top: 5rem;
}

.pause-and-restart {
  cursor: pointer;
  /* animate transform and opacity for smooth hover */
  transition: transform 0.15s ease, opacity 0.15s ease;
  will-change: transform;
}
.pause-and-restart:hover {
  opacity: 0.7;
  /* `scale` isn't a valid CSS property — use transform */
  transform: scale(1.05);
}

.progress-bar {
  pointer-events: none; /* lets clicks pass through */
}

.progress-bar path {
  pointer-events: none;
}

/* _settings.scss — settings page specific styles (fixed for dynamic fonts) */
.mobile__setting {
  background-color: #ffffff;
  color: #161932;
  border-radius: 0.9375rem;
  width: 20.4375rem;
  height: 37.9375rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  font-family: inherit;
  z-index: 40;
}
@media (min-width: 768px) {
  .mobile__setting {
    width: 33.75rem;
    height: 30.6875rem;
  }
}
.mobile__setting--active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* ================= HEADER ================= */
.setting__header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e2e2;
  padding: 1.5rem;
}

.setting__title {
  font-family: inherit;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

.close__btn svg {
  width: 0.7955rem;
  height: 0.7955rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.close__btn:hover svg {
  transform: scale(1.05);
  opacity: 0.7;
}
.close__btn:active svg {
  transform: scale(0.95);
  opacity: 0.9;
}

/* ================= TIME SECTION ================= */
.setting__time {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-inline: 1.5rem;
  font-family: inherit;
}
.setting__time--line {
  width: 100%;
  margin-top: 24px;
  background-color: #e4e2e2;
  height: 1px;
}
.setting__time-label {
  color: var(--colors-blue-900, #161932);
  text-align: center;
  font-family: inherit;
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.26444rem;
  padding-top: 16px;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .setting__time-label {
    font-size: 0.8125rem;
    text-align: left;
  }
}
.setting__time-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 768px) {
  .setting__time-container {
    flex-direction: row;
    justify-content: space-between;
  }
}
.setting__time-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 768px) {
  .setting__time-input {
    flex-direction: column;
    gap: 8px;
  }
}
.setting__time-input-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.625rem;
  background: #eff1fa;
  width: 8.75rem;
  height: 2.5rem;
}
.setting__time-input-container input {
  border: none;
  background-color: transparent;
  caret-color: transparent;
}
.setting__time-input-container input:focus {
  outline: none;
}
.setting__time-input-container input::-webkit-inner-spin-button, .setting__time-input-container input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.setting__time-input-container input[type=number] {
  -moz-appearance: textfield;
}
.setting__time-input-group {
  width: 8rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
}
.setting__time-input-group input {
  width: 100%;
  text-align: left;
  font-size: 1rem;
  padding-left: 0.5rem;
  line-height: 1;
}
.setting__time-input-arrows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-left: 0.25rem;
}
.setting__time-input-arrows img {
  display: block;
  cursor: pointer;
  width: 0.875rem;
  height: auto;
  transition: all 0.2s;
}
.setting__time-input-arrows img:hover {
  transform: scale(1.1);
  opacity: 0.7;
}
.setting__time-input-arrows img:active {
  transform: scale(0.95);
  opacity: 0.9;
}
.setting__time--label {
  font-family: inherit;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
  opacity: 0.4;
}
@media (min-width: 768px) {
  .setting__time--label {
    text-align: left;
    align-self: flex-start;
  }
}

/* ================= FONTS ================= */
.setting__font {
  padding-inline: 1.5rem;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: inherit;
}
.setting__font-label {
  color: var(--colors-blue-900, #161932);
  text-align: center;
  font-family: inherit;
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.26444rem;
  text-transform: uppercase;
  padding-bottom: 24px;
}
.setting__font-options {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.setting__font-option {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1.25rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  background-color: #eff1fa;
  font-family: inherit;
}
.setting__font-option:hover {
  /* combine translate and scale into a single transform */
  transform: translateY(-1px) scale(1.05);
  background-color: #161932;
  color: #ffffff;
}
.setting__font-option--active {
  background-color: #161932;
  color: #ffffff;
}
.setting__font--line {
  width: 100%;
  margin-top: 24px;
  background-color: #e4e2e2;
  height: 1px;
}

/* keep these small samples to preview their individual font faces */
.kumbh-sans-font {
  font-family: "Kumbh Sans", sans-serif;
}

.roboto-font {
  font-family: "Roboto Slab", serif;
}

.space-mono-font {
  font-family: "Space Mono", monospace;
}

/* ================= COLOR ================= */
.setting__color {
  padding-inline: 1.5rem;
  font-family: inherit;
}
@media (min-width: 768px) {
  .setting__color {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
  }
}
.setting__color-label {
  color: var(--colors-blue-900, #161932);
  text-align: center;
  font-family: inherit;
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.26444rem;
  padding-block: 24px;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .setting__color-label {
    text-align: left;
    padding-block: 0;
    font-size: 0.8125rem;
  }
}
.setting__color-options {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
}
.setting__color-option {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.setting__color-option svg {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.setting__color-option--active {
  transform: scale(1.05);
}
.setting__color-option--active svg {
  opacity: 1;
  transform: scale(1);
}
.setting__color-option:hover {
  transform: scale(1.05);
  opacity: 0.7;
}
.setting__color-option:active {
  transform: scale(0.95);
  opacity: 0.9;
}

.color-red {
  background-color: #f87070;
}

.color-cyan {
  background-color: #70f3f8;
}

.color-purple {
  background-color: #db81f8;
}

/* ================= APPLY BUTTON ================= */
.apply-btn {
  width: 8.75rem;
  height: 3.3125rem;
  background-color: #f87070;
  border-radius: 999px;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(1.8rem);
  transition: all 0.2s;
}
@media (min-width: 768px) {
  .apply-btn {
    bottom: 0;
  }
}
.apply-btn:hover {
  background-color: rgb(245.62, 63.38, 63.38);
}
.apply-btn:active {
  background-color: rgb(246.81, 87.69, 87.69);
  scale: 1;
}

.setting__title,
.setting__font-label,
.setting__time-label,
.setting__color-label,
.setting__time--label,
.apply-btn {
  line-height: 1.25;
  letter-spacing: normal;
  word-spacing: 0;
  font-feature-settings: "liga", "kern";
  font-variant-ligatures: common-ligatures;
}

@media (min-width: 768px) {
  .setting__font-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .setting__font-label {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 0;
    font-size: 0.8125rem;
  }
}

/* _light.scss — light theme variables/overrides (placeholder) */
/* _dark.scss — dark theme variables/overrides (placeholder) */

/*# sourceMappingURL=styles.css.map */