/* Full replacement: modern font, no emoji icons, improved dark BG, updated buttons */

/* Core tokens */
:root{
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text: #111827;
  --muted: #6b7280;
  --bg: #eef7fc;
  --radial-1: rgba(255,220,210,0.28);
  --radial-2: rgba(210,230,255,0.24);

  --focus-ring: 3px solid rgba(0,0,0,0.08);
  --focus-offset: 2px;
  --btn-hover-dim: 0.96;

  --start-bg: linear-gradient(180deg,#10b981,#0ea46b);
  --pause-bg: linear-gradient(180deg,#f59e0b,#d97706);
  --reset-bg: linear-gradient(180deg,#ef4444,#dc2626);

  --btn-fg-light: #ffffff;
  --btn-fg-dark: #0b0b0b;

  --card-back: rgba(255,255,255,0.8);
  --shadow: 0 10px 30px rgba(11,18,32,0.06);

  --toggle-light-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.96));
  --toggle-light-border: rgba(0,0,0,0.08);
  --toggle-dark-bg: linear-gradient(135deg,#3b2a7a,#065fa9);
}

/* Base layout */
* { box-sizing: border-box; }
html,body { height: 100%; }
body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  color: var(--text);

  /* clearer layered light background */
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 360px at 8% 12%, var(--radial-1), transparent 18%),
    radial-gradient(700px 260px at 92% 84%, var(--radial-2), transparent 20%),
    linear-gradient(180deg, rgba(238,247,252,1) 0%, rgba(240,248,254,1) 100%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 2.25rem;
  -webkit-font-feature-settings: "ss01" on;
}

/* Logo + title */
.logo {
  width: 180px;
  max-width: 26vw;
  height: auto;
  display: block;
  margin: 0 auto 0.4rem auto;
}
h1 {
  margin: 0 0 0.6rem 0;
  font-size: 1.45rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--text);
  text-shadow: 0 3px 10px rgba(16,24,40,0.03);
}

/* Main wrapper */
.main-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  max-width: 720px;
  width: 100%;
}

/* Timer display */
#timer-display{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 3.6rem;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  background: var(--card-back);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  min-width: fit-content;
}

/* Numeric inputs */
input[type="number"]{
  width: 3ch;
  font-size: inherit;
  font-weight: 700;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--text);
  outline: none;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
}

/* Controls: buttons under the timer */
#controls {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* Buttons: modern typography, square-ish, cleaner shadows */
button{
  margin: 0;
  padding: 0;
  min-width: 92px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none; /* keep labels readable */
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
  box-shadow: 0 8px 26px rgba(3,10,30,0.06);
  padding-left: 16px;
  padding-right: 16px;
}

/* Semantic modern fills */
#start-btn{ background: var(--start-bg); color: var(--btn-fg-light); }
#pause-btn{ background: var(--pause-bg); color: var(--btn-fg-light); }
#reset-btn{ background: var(--reset-bg); color: var(--btn-fg-light); }

/* Hover & active */
#start-btn:hover,
#pause-btn:hover,
#reset-btn:hover{
  filter: brightness(var(--btn-hover-dim));
  transform: translateY(-3px);
}
#start-btn:active,
#pause-btn:active,
#reset-btn:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(3,10,30,0.08);
}

/* Focus rules */
#start-btn:focus,
#pause-btn:focus,
#reset-btn:focus,
#theme-toggle-btn:focus,
input[type="number"]:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Theme toggle (text only, no emoji) */
#theme-toggle-btn{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1200;
  min-width: 56px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--toggle-light-border);
  background: var(--toggle-light-bg);
  box-shadow: 0 8px 24px rgba(2,6,23,0.08);
  cursor: pointer;
  font-weight: 600;
  color: #111;
  padding: 0 10px;
  backdrop-filter: blur(6px);
}

/* Hover micro-interaction */
#theme-toggle-btn:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 40px rgba(2,6,23,0.12);
}

/* Small screens */
@media (max-width: 520px){
  .logo{ width: 140px; }
  h1{ font-size: 1.1rem; margin-bottom: 0.45rem; }
  #timer-display{ font-size: 2.8rem; gap: 0.35rem; padding: 0.35rem 0.5rem; }
  input[type="number"]{ width: 2.6ch; font-size: inherit; }
  button{ min-width: 72px; height: 40px; font-size: 0.95rem; border-radius: 8px; }
  #theme-toggle-btn{ min-width: 48px; height: 36px; top: 10px; right: 10px; padding: 0 8px; }
  #controls { gap: 0.45rem; margin-top: 0.75rem; }
}

/* Dark theme: deeper, richer background (restored) */
body.dark{
  --text: #e6eef8;
  --bg: #04040a;
  --focus-ring: 3px solid rgba(255,255,255,0.08);
  --start-bg: linear-gradient(180deg,#059669,#047a57);
  --pause-bg: linear-gradient(180deg,#d97706,#b45309);
  --reset-bg: linear-gradient(180deg,#ef4444,#d43a3a);
  --btn-fg-light: #ffffff;
  --btn-fg-dark: #ffffff;
  --card-back: rgba(50,50,50,0.9);
  --shadow: 0 14px 40px rgba(0,0,0,0.6);
  background-image:
    radial-gradient(900px 360px at 82% 10%, rgba(32,28,46,0.18), transparent 18%),
    radial-gradient(600px 260px at 10% 80%, rgba(8,10,18,0.12), transparent 18%),
    linear-gradient(180deg, #000000 0%, #04040a 100%);
}

/* theme toggle dark styling (text only) */
body.dark #theme-toggle-btn{
  border: none;
  background: var(--toggle-dark-bg);
  color: #fff;
  box-shadow: 0 12px 36px rgba(40,30,90,0.14), inset 0 -6px 18px rgba(0,0,0,0.25);
}

/* ensure buttons have white text in dark mode */
body.dark #start-btn,
body.dark #pause-btn,
body.dark #reset-btn {
  color: #ffffff;
}

/* Utility: center main wrapper if used */
.main-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}