/* style.css */

/* ---------------------------------------------
   1. THEME TOKENS
   All colors, radii and shadows are variables so
   the whole widget can be reskinned from here.
---------------------------------------------- */
:root{
  /* base surfaces */
  --bg-deep:#0b0d16;
  --card-bg: rgba(255,255,255,0.06);
  --card-border: rgba(255,255,255,0.14);
  --card-shadow: 0 20px 60px rgba(0,0,0,0.45);

  --text-primary:#f4f2ee;
  --text-secondary: rgba(244,242,238,0.62);

  --track-color: rgba(255,255,255,0.10);

  --btn-ghost-bg: rgba(255,255,255,0.08);
  --btn-ghost-fg: rgba(244,242,238,0.85);
  --btn-primary-fg:#181022;

  --tab-active-bg: rgba(255,255,255,0.14);
  --tab-inactive-fg: rgba(244,242,238,0.55);

  --dot-off: rgba(255,255,255,0.18);

  --radius-xl: 28px;
  --radius-lg: 18px;
  --radius-md: 12px;

  /* mode-specific accent pairs (used by gradients + ring) */
  --mode-a:#7c5cff;
  --mode-b:#2f6bff;
  --amb-a:#241a45;
  --amb-b:#12163a;
}

/* Focus / Work palette — deep plum → indigo */
[data-mode="work"]{
  --mode-a:#a463f2;
  --mode-b:#4d5bf0;
  --amb-a:#2a1740;
  --amb-b:#111433;
}
/* Short Break — teal → mint */
[data-mode="short"]{
  --mode-a:#20c9a6;
  --mode-b:#3fd6c1;
  --amb-a:#0d3b38;
  --amb-b:#0a2233;
}
/* Long Break — amber → gold */
[data-mode="long"]{
  --mode-a:#f2a740;
  --mode-b:#f2cf5b;
  --amb-a:#3a2410;
  --amb-b:#241c30;
}

/* Light theme overrides */
body.light{
  --bg-deep:#eef0f6;
  --card-bg: rgba(255,255,255,0.55);
  --card-border: rgba(20,20,40,0.10);
  --card-shadow: 0 20px 50px rgba(30,30,60,0.14);

  --text-primary:#1c1c28;
  --text-secondary: rgba(28,28,40,0.58);

  --track-color: rgba(20,20,40,0.08);

  --btn-ghost-bg: rgba(20,20,40,0.06);
  --btn-ghost-fg: rgba(28,28,40,0.75);

  --tab-active-bg: rgba(255,255,255,0.75);
  --tab-inactive-fg: rgba(28,28,40,0.45);

  --dot-off: rgba(20,20,40,0.14);
}

/* ---------------------------------------------
   2. RESET + BASE
---------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

html, body{
  height:100%;
  margin:0;
}

body{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow:hidden;
  transition: background 0.6s ease, color 0.4s ease;
  -webkit-font-smoothing: antialiased;
}

button{
  font-family: inherit;
  cursor:pointer;
  border:none;
  background:none;
  color:inherit;
}
button:focus-visible, .icon-btn:focus-visible{
  outline: 2px solid var(--mode-b);
  outline-offset: 3px;
}

/* ---------------------------------------------
   3. AMBIENT BACKGROUND
   Soft blurred blobs behind the glass card that
   shift color when the mode changes.
---------------------------------------------- */
.ambient-bg{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 18% 20%, var(--amb-a) 0%, transparent 55%),
    radial-gradient(circle at 82% 78%, var(--amb-b) 0%, transparent 55%),
    var(--bg-deep);
  transition: background 0.8s ease;
  filter: saturate(1.1);
}

/* ---------------------------------------------
   4. GLASS CARD (WIDGET)
---------------------------------------------- */
.widget{
  position:relative;
  z-index:1;
  width:100%;
  max-width:360px;
  padding:22px 26px 28px;
  border-radius: var(--radius-xl);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  animation: rise 0.6s cubic-bezier(.2,.8,.2,1);
}

@keyframes rise{
  from{ opacity:0; transform: translateY(14px) scale(0.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.widget__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:22px;
}

/* ---------------------------------------------
   5. MODE TABS
---------------------------------------------- */
.mode-tabs{
  display:flex;
  gap:2px;
  padding:4px;
  background: var(--track-color);
  border-radius: var(--radius-lg);
}

.mode-tab{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.01em;
  color: var(--tab-inactive-fg);
  padding:7px 11px;
  border-radius: 12px;
  transition: color 0.25s ease, background 0.25s ease;
  white-space:nowrap;
}

.mode-tab.is-active{
  color: var(--text-primary);
  background: var(--tab-active-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.mode-tab:hover:not(.is-active){
  color: var(--text-primary);
}

/* ---------------------------------------------
   6. HEADER ICON BUTTONS
---------------------------------------------- */
.header-actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
}

.icon-btn{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-fg);
  transition: transform 0.2s ease, background 0.2s ease;
}
.icon-btn:hover{ transform: translateY(-1px); }
.icon-btn:active{ transform: scale(0.92); }

.icon-btn .icon{ width:17px; height:17px; }

/* sound icon swap */
.icon--sound-off{ display:none; }
#soundToggle.is-muted .icon--sound-on{ display:none; }
#soundToggle.is-muted .icon--sound-off{ display:block; }

/* theme icon swap */
.icon--moon{ display:none; }
body.light .icon--sun{ display:none; }
body.light .icon--moon{ display:block; }

/* ---------------------------------------------
   7. PROGRESS RING
---------------------------------------------- */
.ring-wrap{
  position:relative;
  width:220px;
  height:220px;
  margin:6px auto 18px;
}

.ring{
  width:100%;
  height:100%;
  transform: rotate(-90deg); /* start progress at 12 o'clock */
}

/* gradient stops read from CSS vars, updated by JS via style attr fallback too */
.grad-stop-a{ stop-color: var(--mode-a); }
.grad-stop-b{ stop-color: var(--mode-b); }

.ring__track{
  fill:none;
  stroke: var(--track-color);
  stroke-width:11;
}

.ring__progress{
  fill:none;
  stroke: url(#ringGradient);
  stroke-width:11;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s linear, stroke 0.4s ease;
}

.ring__content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
}

.time-display{
  font-size:52px;
  font-weight:800;
  letter-spacing:-0.02em;
  font-variant-numeric: tabular-nums;
  line-height:1;
}

.mode-label{
  font-size:12.5px;
  font-weight:500;
  color: var(--text-secondary);
  letter-spacing:0.01em;
}

/* subtle breathing glow while running */
.widget.is-running .ring__progress{
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--mode-a) 55%, transparent));
}

/* ---------------------------------------------
   8. SESSION DOTS
---------------------------------------------- */
.session-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:22px;
}

.dot{
  width:6.5px;
  height:6.5px;
  border-radius:50%;
  background: var(--dot-off);
  transition: background 0.3s ease, transform 0.3s ease;
}

.dot.is-complete{
  background: linear-gradient(135deg, var(--mode-a), var(--mode-b));
  transform: scale(1.15);
}

/* ---------------------------------------------
   9. CONTROLS
---------------------------------------------- */
.controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition: transform 0.18s cubic-bezier(.2,.8,.3,1.4), box-shadow 0.25s ease, background 0.25s ease;
}

.btn--ghost{
  width:46px;
  height:46px;
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-fg);
}
.btn--ghost svg{ width:18px; height:18px; }
.btn--ghost:hover{ transform: translateY(-2px); }
.btn--ghost:active{ transform: scale(0.90); }

.btn--primary{
  width:66px;
  height:66px;
  background: linear-gradient(135deg, var(--mode-a), var(--mode-b));
  color: var(--btn-primary-fg);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--mode-a) 45%, transparent);
}
.btn--primary svg{ width:24px; height:24px; }
.btn--primary:hover{ transform: translateY(-2px) scale(1.03); }
.btn--primary:active{ transform: scale(0.92); }

.icon--pause{ display:none; }
.btn--primary.is-playing .icon--play{ display:none; }
.btn--primary.is-playing .icon--pause{ display:block; }

/* ---------------------------------------------
   10. RESPONSIVE
---------------------------------------------- */
@media (max-width: 420px){
  .widget{ max-width: 92vw; padding:18px 18px 22px; }
  .ring-wrap{ width:190px; height:190px; }
  .time-display{ font-size:44px; }
  .mode-tab{ padding:6px 8px; font-size:11.5px; }
}

@media (min-width: 700px){
  .widget{ max-width: 380px; padding:26px 30px 32px; }
}

/* respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .widget{ animation:none; }
  .btn, .icon-btn, .dot, .ring__progress{ transition:none; }
}