/* ===========================================================
   TimeFlow — Professional + Premium Editorial + Vibrant Pro
   =========================================================== */

/* ---------- THEME TOKENS ---------- */
:root{
  /* ===== LIGHT MODE — FRESH SPRING ===== */
  --page-bg-light:#eef8f2;  /* mist green */
  --surface:#f5fbf8;        /* white-mint paper */
  --text-default:#0e1a13;   /* forest black */
  --border:#d4e8de;         /* pale green-gray */

  /* Card palettes */
  --rose-bg:#f3edff;   --rose-accent:#7b6ef6;  /* soft violet */
  --blue-bg:#e9f4ff;   --blue-accent:#3a94ff;  /* sky blue */
  --mint-bg:#eafff1;   --mint-accent:#13b87b;  /* spring green */
  --peach-bg:#fff3ea;  --peach-accent:#f1a04f; /* blossom amber */

  /* Column tints (To Do / Done) */
  --softA:#e8f0ff;   /* To Do: lilac-leaning blue tint */
  --softC:#e6fff2;   /* Done: mint tint */

  /* Priority colors */
  --good:#10b981; --warn:#f59e0b; --bad:#e11d48;

  /* Premium fonts */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Playfair Display", "Georgia", serif;

  /* Base tokens used throughout (added) */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Respect system setting for built-in UI controls */
:root { color-scheme: light dark; }

/* ---------- DARK MODE (Deep Blue) ---------- */
:root.dark{
  --page-bg-dark: #091427;   /* deep navy background */
  --surface:      #0f1f3c;   /* card surface */
  --border:       #20335c;   /* steel-blue border */

  /* Text base for dark (added) */
  --text-default: #e8ecf3;

  /* Deeper shadow in dark */
  --shadow: 0 14px 40px rgba(0,0,0,.55);

  /* Accents (used to colorize text/headings) */
  --rose-accent:  #ff8dc5;
  --blue-accent:  #7aa5ff;
  --mint-accent:  #39e6a9;
  --peach-accent: #f8c76b;
}

/* ---------- RESET & CORE ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Smooth transitions (global) */
*{
  transition:
    background-color .35s ease,
    background .35s ease,
    color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    letter-spacing .25s ease;
}

img,svg,canvas,video{max-width:100%;height:auto;display:block}

/* ---------- PAGE BACKGROUND ---------- */
:root:not(.dark) body{
  background:
    radial-gradient(920px 660px at 12% -6%, #eef2ff 0%, transparent 55%),
    radial-gradient(920px 660px at 100% 8%, #e6f7ff 0%, transparent 55%),
    radial-gradient(920px 660px at -6% 108%, #e9fff2 0%, transparent 55%),
    linear-gradient(135deg, #eef8f2 0%, #eef6ff 55%, #f0fff6 100%);
  background-color: var(--page-bg-light);
  background-repeat: no-repeat;
  background-size: 920px 660px, 920px 660px, 920px 660px, cover;
  background-position: 12% -6%, 100% 8%, -6% 108%, center;
  background-attachment: fixed, fixed, fixed, fixed;
}
:root.dark body{
  background:
    radial-gradient(1200px 900px at 50% -10%, #112a55 0%, transparent 60%),
    radial-gradient(1000px 850px at 120% 120%, #0a1b38 0%, transparent 65%),
    var(--page-bg-dark) !important;
  background-attachment: fixed, fixed, fixed;
}

/* ---------- TYPOGRAPHY ---------- */
body{
  color: var(--text-default);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.4;
  min-height: 100vh;
  overflow-x: hidden;
}
h1,h2,h3,h4{
  margin:0 0 10px 0;
  line-height:1.2;
  letter-spacing:.3px;
  font-family: var(--font-head);
  font-weight:700;
  color: var(--ink);
}
.card .section-title h2{ font-size: clamp(1.35rem, 1.2rem + 1vw, 1.9rem) }
.card h3{ font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem) }
p{margin:0 0 10px 0}
button, input, select, .tag, .col-badge{ font-family: var(--font-body); font-weight:600 }

/* ---------- HEADER ---------- */
header{
  position: sticky; top:0; z-index: 5;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 18px;
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.brand{display:flex; gap:10px; align-items:center}
.title{font-size:1.05rem; font-weight:800}
.actions{display:flex; gap:8px}
header button { color: var(--text-default); } /* ensure header buttons keep contrast */

button{
  height: 38px; padding: 0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  background: color-mix(in oklab, var(--surface) 82%, white 18%);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight:600;
  cursor:pointer;
  box-shadow: var(--shadow);
}
button:hover{transform: translateY(-1px)}
button:active{transform: translateY(0)}

/* ---------- MAIN GRID ---------- */
main{max-width:1200px; margin: 22px auto; padding: 0 16px}
.grid{ display:grid; gap:18px; grid-template-columns: 1fr }
@media(min-width:900px){ .grid{grid-template-columns: 1.2fr .8fr} }

/* ---------- CARD ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  position: relative;
}
.section-title{
  display:flex; align-items:center; justify-content:space-between;
  margin: 0 0 12px 0; gap: 12px;
}
.section-title .chip{font-size:.8rem; opacity:.8}

/* ---------- CARD COLOR SYSTEM ---------- */
.card{ --card-bg: var(--surface); --card-accent: #7c88ff; --ink: #222; --card-text: #222; --card-sub: #666 }

/* Assign palettes */
:root:not(.dark) #task-manager{ --card-bg: var(--rose-bg); --card-accent: var(--rose-accent) }
:root:not(.dark) #focus-session{ --card-bg: var(--blue-bg); --card-accent: var(--blue-accent) }
:root.dark        #task-manager{ --card-accent: var(--rose-accent) }
:root.dark        #focus-session{ --card-accent: var(--blue-accent) }

/* Light: headings + body text are colorful (no black) */
:root:not(.dark) .card{
  background: var(--card-bg);
  --ink: color-mix(in oklab, black 34%, var(--card-accent));
  --card-text: color-mix(in oklab, var(--card-accent) 64%, #0e1a13 36%);
  --card-sub:  color-mix(in oklab, var(--card-text) 52%, var(--card-bg) 48%);
  color: var(--card-text);
}
:root:not(.dark) .card .section-title h2,
:root:not(.dark) .card h3{ color: var(--ink) }

/* Dark: deep blue cards, colorful text + bright headings */
:root.dark .card{
  background: color-mix(in oklab, var(--surface) 96%, var(--page-bg-dark) 4%);
  --card-text: color-mix(in oklab, var(--card-accent) 72%, #ffffff 28%);
  --card-sub:  color-mix(in oklab, #ffffff 55%, var(--surface) 45%);
  color: var(--card-text);
}
:root.dark .card .section-title h2,
:root.dark .card h3{
  color: color-mix(in oklab, white 88%, var(--card-accent));
}

/* Editorial gradient ink for headings */
.card .section-title h2,
.card h3{
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--card-accent) 90%, #ffffff 10%),
    color-mix(in oklab, var(--card-accent) 60%, #000000 20%));
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}

/* ---------- FORM CONTROLS ---------- */
.task-controls{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin: 0 0 12px 0;
}
.task-controls input, .task-controls select{
  height: 38px; padding: 0 10px; min-width: 120px;
  border: 1px solid var(--border); border-radius: 10px; outline: none;
  background: color-mix(in oklab, var(--card-bg) 90%, white 10%); color: inherit;
}
#addTaskBtn{min-width:110px}

/* ---------- 2-COLUMN TASK BOARD ---------- */
.task-board{ display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr) }
.task-column{
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 12px;
  min-height: 180px;
  background: color-mix(in oklab, var(--card-bg) 94%, white 6%);
  display: flex; flex-direction: column; position: relative; overflow: hidden; isolation: isolate;
}
.task-column::before{
  content: ""; position: absolute; inset: -1px; border-radius: 14px;
  background: linear-gradient(135deg,
      color-mix(in oklab, var(--card-accent) 35%, #fff) 0%,
      color-mix(in oklab, var(--card-accent) 10%, #fff) 50%,
      color-mix(in oklab, var(--card-accent) 35%, #fff) 100%);
  z-index: -1; opacity: .65; pointer-events: none;
}
:root.dark .task-column::before{
  background: linear-gradient(135deg,
      color-mix(in oklab, var(--card-accent) 45%, #000) 0%,
      color-mix(in oklab, var(--card-accent) 15%, #000) 50%,
      color-mix(in oklab, var(--card-accent) 45%, #000) 100%);
  opacity:.55;
}
.task-column h3{
  margin: 0 0 6px 0; font-weight: 700; letter-spacing: .6px; font-size: 1.05rem; color: var(--ink);
  font-family: var(--font-head);
}
.task-column h3::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:999px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--card-accent) 85%, #fff 15%),
    color-mix(in oklab, var(--card-accent) 55%, #fff 5%),
    color-mix(in oklab, var(--card-accent) 85%, #fff 15%));
  opacity:.9;
}
.col-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size: .75rem; font-weight:700;
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px; text-align:center;
  color: var(--card-sub);
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--card-accent) 14%, var(--card-bg)),
      color-mix(in oklab, var(--card-bg) 95%, #fff 5%));
}
/* Light column tints (Fresh Spring) */
:root:not(.dark) .task-column.todo  { background: color-mix(in oklab, var(--softA) 86%, white 14%) }
:root:not(.dark) .task-column.done  { background: color-mix(in oklab, var(--softC) 88%, white 12%) }
/* Dark harmony */
:root.dark .task-column{
  background: color-mix(in oklab, var(--surface) 95%, var(--page-bg-dark) 5%);
  border-color: color-mix(in oklab, var(--border) 90%, var(--page-bg-dark) 10%);
}

/* ---------- TASK CARD ---------- */
.task{
  background:
    radial-gradient(circle at 12px 10px, color-mix(in oklab, var(--card-accent) 7%, #ffffff) 12%, transparent 14%),
    linear-gradient(180deg, color-mix(in oklab, var(--card-bg) 94%, #fff 6%), var(--card-bg));
  background-size: 38px 38px, cover; background-blend-mode: overlay, normal;
  border:1px solid var(--border);
  border-radius:12px; padding:10px; margin:10px 0;
  display:grid; gap:6px; cursor:grab; transition: transform .12s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset;
}
.task:hover{ transform: translateY(-2px) scale(1.01); box-shadow: 0 10px 18px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.25) inset }
.task .row{display:flex; justify-content:space-between; gap:8px}
.task .title{font-weight:800; letter-spacing:.1px; color: var(--card-text)}
.task .meta{font-size:.78rem; color: var(--card-sub)}
.tag{
  padding:2px 8px; border-radius:999px; font-size:.68rem;
  border:1px solid var(--border);
  color: var(--card-text);
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--card-accent) 12%, var(--card-bg)),
      color-mix(in oklab, var(--card-bg) 95%, #fff 5%));
}
/* Priority tag tints (optional color cue) */
.tag.p1 { border-color: color-mix(in oklab, var(--bad) 60%, var(--border)); }
.tag.p2 { border-color: color-mix(in oklab, var(--warn) 60%, var(--border)); }
.tag.p3 { border-color: color-mix(in oklab, var(--good) 60%, var(--border)); }

/* Smooth gradient priority bars */
.task[data-pri="1"]{ border-left: 5px solid transparent;
  background-image:
    linear-gradient(180deg, color-mix(in oklab, var(--bad) 18%, var(--card-bg)), transparent),
    linear-gradient(180deg, color-mix(in oklab, var(--card-bg) 94%, #fff 6%), var(--card-bg));
  background-origin: border-box; background-clip: padding-box, border-box;
}
.task[data-pri="2"]{ border-left: 5px solid transparent;
  background-image:
    linear-gradient(180deg, color-mix(in oklab, var(--warn) 16%, var(--card-bg)), transparent),
    linear-gradient(180deg, color-mix(in oklab, var(--card-bg) 94%, #fff 6%), var(--card-bg));
  background-origin: border-box; background-clip: padding-box, border-box;
}
.task[data-pri="3"]{ border-left: 5px solid transparent;
  background-image:
    linear-gradient(180deg, color-mix(in oklab, var(--good) 16%, var(--card-bg)), transparent),
    linear-gradient(180deg, color-mix(in oklab, var(--card-bg) 94%, #fff 6%), var(--card-bg));
  background-origin: border-box; background-clip: padding-box, border-box;
}
.task.is-done{
  background-image:
    linear-gradient(180deg, color-mix(in oklab, var(--good) 12%, var(--card-bg)), transparent 40%),
    linear-gradient(180deg, color-mix(in oklab, var(--card-bg) 96%, #fff 4%), var(--card-bg));
  border-color: color-mix(in oklab, var(--good) 55%, var(--border));
}
.toggle-btn{
  display:inline-flex; align-items:center; gap:6px;
  height: 34px; padding: 0 12px; border-radius:999px; font-weight:800; cursor:pointer;
  border:1px solid color-mix(in oklab, var(--card-accent) 35%, var(--border));
  background: color-mix(in oklab, var(--card-bg) 90%, var(--card-accent) 10%);
  color: var(--card-text);
}
.toggle-btn::before{content:"✓"; font-weight:900}
.done-chip{
  padding:2px 8px; border-radius:999px; border:1px solid color-mix(in oklab, var(--good) 55%, var(--border));
  background: color-mix(in oklab, var(--good) 18%, var(--card-bg));
  color: var(--card-text);
}

/* Empty state */
.task-list:empty::before{
  content: "No tasks here yet — add one!";
  display: block; padding: 14px; font-size: .9rem;
  border: 1px dashed var(--border); border-radius: 10px;
  color: color-mix(in oklab, var(--card-text) 70%, var(--card-bg));
  background: color-mix(in oklab, var(--card-bg) 92%, #fff 8%);
}

/* Dark-mode task shadows */
:root.dark .task{ box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 18px rgba(0,0,0,.35) }
:root.dark .task:hover{ box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 22px rgba(0,0,0,.45) }

/* ---------- FOCUS SESSION (Progress Ring) ---------- */
#focus-session { /* uses --blue-* tokens */ }
.timer{
  --progress: 0deg;
  width: 220px; height: 220px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    conic-gradient(var(--card-accent) var(--progress),
      color-mix(in oklab, var(--card-bg) 50%, #000 0%) 0deg);
  padding: 10px; transition: background 0.2s linear;
}
.timer-inner{
  width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--card-bg) 92%, #ffffff 8%);
  border: 1px solid var(--border);
  box-shadow: inset 0 0 25px rgba(0,0,0,0.05);
}
.timer .digits{font-size: 2.4rem; font-weight: 800; color: var(--ink)}
.timer .mode{font-size: .9rem; font-weight: 600; color: var(--card-text)}

.focus-content{ display:flex; flex-direction: column; align-items:center; gap:18px }
.focus-controls{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px }
.focus-controls button, .focus-controls select{
  height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in oklab, var(--card-bg) 90%, white 10%); font-weight: 600; cursor:pointer; color: var(--card-text);
}
.focus-controls button:hover{transform: translateY(-1px)}

/* Dark cyan/blue ring & glow */
:root.dark #focus-session .timer{
  background:
    conic-gradient(
      color-mix(in oklab, #00d4ff 85%, #0098ff) var(--progress),
      color-mix(in oklab, var(--surface) 65%, var(--page-bg-dark)) 0deg
    );
  box-shadow:
    0 0 0 4px color-mix(in oklab, #00aaff 25%, transparent) inset,
    0 14px 30px color-mix(in oklab, #00b3ff 30%, transparent),
    0 0 46px color-mix(in oklab, #00e0ff 28%, transparent);
}
:root.dark #focus-session .timer-inner{
  background: color-mix(in oklab, var(--surface) 88%, var(--page-bg-dark) 12%);
  border-color: color-mix(in oklab, #1e335a 70%, #0b1428 30%);
}
:root.dark #focus-session .digits{
  text-shadow: 0 1px 0 rgba(255,255,255,0.25), 0 0 14px color-mix(in oklab, #00e0ff 35%, transparent);
}

/* ---------- FOOTER ---------- */
footer{opacity:.7; text-align:center; padding:30px 10px}

/* ---------- UTIL ---------- */
.row{display:flex; gap:10px; align-items:center}
.grow{flex:1 1 auto}
.right{margin-left:auto}

/* ---------- Smooth theme / font transition wrapper ---------- */
:root.theme-anim *, :root.theme-anim body{
  transition:
    color .45s ease,
    background-color .45s ease,
    background .45s ease,
    border-color .45s ease,
    box-shadow .45s ease,
    letter-spacing .35s ease;
}
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important }
}

/* ===========================================================
   Vibrance Boost, textures, chips, lifts
   =========================================================== */
@keyframes sheen { 0%{transform:translateX(-120%)}100%{transform:translateX(220%)} }
button, .toggle-btn, .focus-controls button {
  position: relative;
  border-color: color-mix(in oklab, var(--card-accent) 35%, var(--border));
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--card-accent) 18%, var(--card-bg)),
      color-mix(in oklab, var(--card-bg) 90%, #ffffff 10%));
  box-shadow:
    0 8px 18px rgba(0,0,0,.06),
    0 0 0 1px color-mix(in oklab, var(--card-accent) 20%, transparent) inset;
}
button::after, .toggle-btn::after, .focus-controls button::after {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%); filter: blur(0.5px); pointer-events: none;
}
button:hover::after, .toggle-btn:hover::after, .focus-controls button:hover::after { animation: sheen 900ms ease }

.task-column {
  background-image:
    radial-gradient(circle at 8px 8px, color-mix(in oklab, var(--card-accent) 10%, #ffffff) 18%, transparent 20%),
    radial-gradient(circle at 28px 22px, color-mix(in oklab, var(--card-accent) 8%, #ffffff) 16%, transparent 18%),
    linear-gradient(180deg, color-mix(in oklab, var(--card-bg) 92%, #fff 8%), var(--card-bg));
  background-size: 34px 34px, 40px 40px, cover;
  background-blend-mode: overlay, overlay, normal;
}
.task {
  background-image:
    radial-gradient(circle at 12px 10px, color-mix(in oklab, var(--card-accent) 7%, #ffffff) 12%, transparent 14%),
    linear-gradient(180deg, color-mix(in oklab, var(--card-bg) 94%, #fff 6%), var(--card-bg));
  background-size: 38px 38px, cover;
  background-blend-mode: overlay, normal;
}

.tag, .col-badge, .done-chip {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--card-accent) 12%, var(--card-bg)),
      color-mix(in oklab, var(--card-bg) 95%, #fff 5%));
  border-color: color-mix(in oklab, var(--card-accent) 25%, var(--border));
}

.card:hover { transform: translateY(-2px); }
.task:hover { transform: translateY(-2px) scale(1.01); }

/* Column frames and headers already defined above */