/* ===========================================================================
   Just Don't Procrastinate — shared design system
   Tokens, reset, and primitives used by both index.html and app.html.
   Surface-specific layout lives inline in each page.
   =========================================================================== */

/* --------------------------------------------------------------- tokens */
:root{
  --bg:#faf9f7; --surface:#fff; --surface-2:#f4f2ef; --surface-3:#eceae6;
  --text:#1c1b1a; --text-2:#5f5b57; --text-3:#676360;
  --border:rgba(28,27,26,.08); --border-2:rgba(28,27,26,.15);
  --accent:#1f5bcc; --accent-soft:rgba(31,91,204,.10);
  --danger:#b8362a; --danger-soft:rgba(184,54,42,.10);
  --ok:#2c7048;
  --on-fill:#fff;
  --shadow-1:0 1px 2px rgba(28,27,26,.05), 0 2px 6px rgba(28,27,26,.045);
  --shadow-2:0 2px 4px rgba(28,27,26,.05), 0 10px 28px rgba(28,27,26,.09);
  --shadow-3:0 4px 8px rgba(28,27,26,.06), 0 20px 48px rgba(28,27,26,.13);
  --r-lg:12px; --r-md:9px; --r-sm:6px;
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#131316; --surface:#1b1b1f; --surface-2:#212127; --surface-3:#2b2b32;
    --text:#f3f2f0; --text-2:#b0aca6; --text-3:#a09b93;
    --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.16);
    --accent:#6a9bff; --accent-soft:rgba(106,155,255,.15);
    --danger:#ff8b79; --danger-soft:rgba(255,139,121,.15);
    --ok:#63c489;
    --on-fill:#14161b;
    --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
    --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45);
    --shadow-3:0 4px 8px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#131316; --surface:#1b1b1f; --surface-2:#212127; --surface-3:#2b2b32;
  --text:#f3f2f0; --text-2:#b0aca6; --text-3:#a09b93;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.16);
  --accent:#6a9bff; --accent-soft:rgba(106,155,255,.15);
  --danger:#ff8b79; --danger-soft:rgba(255,139,121,.15);
  --ok:#63c489;
  --on-fill:#14161b;
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45);
  --shadow-3:0 4px 8px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.55);
  color-scheme:dark;
}

/* Per-class identity hues. Lightness and saturation are re-pitched wholesale in
   dark so each holds AA on its own ground. Identity only — never status. */
.hue-teal{--h:184;--s:64%;--l:31%}   .hue-amber{--h:32;--s:82%;--l:34%}
.hue-rose{--h:344;--s:64%;--l:42%}   .hue-violet{--h:266;--s:54%;--l:48%}
.hue-green{--h:146;--s:50%;--l:29%}  .hue-clay{--h:16;--s:60%;--l:40%}
.hue-slate{--h:212;--s:18%;--l:38%}  .hue-plum{--h:310;--s:40%;--l:40%}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [class*="hue-"]{--l:68%;--s:62%}
}
:root[data-theme="dark"] [class*="hue-"]{--l:68%;--s:62%}
[class*="hue-"]{--c:hsl(var(--h) var(--s) var(--l));--c-soft:hsl(var(--h) var(--s) var(--l)/.13)}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px;line-height:1.45;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* Browser surfaces themed from the palette rather than left on defaults. */
::selection{background:var(--accent-soft);color:var(--text)}
:root{accent-color:var(--accent);caret-color:var(--accent)}
*{scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:content-box}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
a{color:var(--accent);text-underline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer;color:inherit}
h1,h2,h3{margin:0;font-weight:640;letter-spacing:-.022em}
img,svg{max-width:100%}

.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[inert]{pointer-events:none}
/* A class that sets display beats the UA [hidden] rule, so state it explicitly.
   Without this, toggling .hidden on a display:flex element silently does nothing. */
[hidden]{display:none!important}

/* ---------------------------------------------------------- primitives */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  padding:8px 15px;border-radius:var(--r-md);font-size:13px;font-weight:600;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);
  transition:background .13s var(--ease),transform .13s var(--ease);
}
.btn:hover{background:var(--surface-3)}
.btn:active{transform:scale(.975)}
.btn--p{background:var(--accent);color:var(--on-fill);box-shadow:var(--shadow-1)}
.btn--p:hover{background:var(--accent);filter:brightness(1.07)}
.btn--d{color:var(--danger)}
.btn--lg{padding:12px 22px;font-size:15px;border-radius:var(--r-lg)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.btn:disabled:hover{background:var(--surface-2);filter:none}

.inp{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
  padding:8px 10px;font-size:13.5px;width:100%;
  transition:border-color .13s var(--ease),background .13s var(--ease);
}
.inp:focus{border-color:var(--accent);background:var(--surface)}
.inp::placeholder{color:var(--text-3)}
select.inp{
  appearance:none;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;
  background-size:5px 5px;background-repeat:no-repeat;
}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.field label{font-size:11.5px;font-weight:620;color:var(--text-2)}
.row{display:flex;gap:8px}
.row>*{flex:1}

.chip{
  font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:99px;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);color:var(--text-2);
  white-space:nowrap;
  transition:background .13s var(--ease),color .13s var(--ease),box-shadow .13s var(--ease);
}
.chip:hover{background:var(--surface-3)}
.chip[aria-pressed="true"]{background:var(--c,var(--accent));color:var(--on-fill);box-shadow:none}
.chip--d[aria-pressed="true"]{background:var(--accent);color:var(--on-fill);box-shadow:none}
.chip__dot{display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--c);margin-right:5px;vertical-align:-1px}
.chip[aria-pressed="true"] .chip__dot{background:var(--on-fill)}

.hues{display:flex;gap:6px;flex-wrap:wrap}
.hues button{width:24px;height:24px;border-radius:var(--r-sm);background:var(--c);position:relative;transition:transform .18s var(--spring)}
.hues button:hover{transform:scale(1.12)}
.hues button[aria-pressed="true"]::after{content:"";position:absolute;inset:-4px;border-radius:var(--r-md);border:2px solid var(--c)}

.daypick{display:flex;gap:4px}
.daypick button{
  width:30px;height:30px;border-radius:var(--r-sm);font-size:11.5px;font-weight:640;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);color:var(--text-2);
  transition:background .13s var(--ease),color .13s var(--ease),box-shadow .13s var(--ease);
}
.daypick button[aria-pressed="true"]{background:var(--accent);color:var(--on-fill);box-shadow:none}

/* ------------------------------------------------------------- motion */
/* Every animated sequence must resolve instantly to its end state here,
   never merely run faster. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    animation-delay:0ms!important;transition-duration:.01ms!important;
  }
}