/* ============================================================
   TOKENS.CSS — shared design-system foundation for every
   TeamPfaffApps app. Single source of truth for color, spacing,
   radius, shadow, type, and the base component vocabulary
   (buttons, tags, cards, inputs, modal, toast) that every app
   builds on top of.

   Loaded FIRST, before an app's own styles.css — an app's own
   stylesheet should only contain page/feature-specific rules from
   here on, not its own copy of :root or generic .btn/.card/input.in
   rules. See CLAUDE.md's design-system section for the reasoning
   and the "why this file exists" root-cause history.

   Two color systems, kept deliberately separate — do not blur them:
   - Brand mark colors (--brand-*) are decorative only: the logo
     itself, favicon, PWA icons. Bright/saturated, meant for a small
     badge, not for UI chrome.
   - Functional UI colors (--teal/--amber/--coral/--purple, no
     "brand-" prefix) are muted on purpose — this app's standing
     "calm, not alarming" rule (see CLAUDE.md) lives here. Never
     swap a brand-* value into a functional role.
   ============================================================ */

@font-face{
  font-family:'Baloo 2';
  font-weight:700 800;
  font-style:normal;
  font-display:swap;
  src:url('fonts/baloo2-variable.woff2') format('woff2');
}

:root{
  /* ---- surfaces & ink (light, default) ---- */
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel-sunken:#eef0f7;
  --ink:#132959;
  --ink-soft:#5b6787;
  --ink-faint:#94a0bd;
  --line:#e2e5f0;

  /* ---- functional UI — muted, "calm not alarming" (see CLAUDE.md) ---- */
  --teal:#0f8a72;
  --teal-deep:#0b6455;
  --teal-wash:#e3f3ee;
  --amber:#c77b28;
  --amber-wash:#fbeed9;
  --coral:#c8523a;
  --coral-wash:#f7e3de;
  --purple:#5b3fa0;
  --purple-wash:#f1eefb;

  /* ---- brand mark — decorative only, the logo itself (see header note above) ---- */
  --brand-coral:#fe463f;
  --brand-teal:#00b3a7;
  --brand-purple:#5732fc;
  --brand-gold:#feba26;
  --brand-navy:#031855;

  /* ---- wordmark text — swaps per theme for contrast, mark itself never changes ---- */
  --wordmark-team:#031855;
  --wordmark-pfaff:#672dea;

  /* ---- radius ---- */
  --r-sm:8px;
  --r-md:14px;
  --r-lg:20px;
  --r-full:999px;

  /* ---- spacing scale — use these, not ad hoc px values ---- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-12:48px;

  /* ---- shadow ---- */
  --shadow-sm:0 1px 2px rgba(19,41,89,.06);
  --shadow-md:0 1px 2px rgba(19,41,89,.06), 0 8px 24px rgba(19,41,89,.08);

  /* ---- type ---- */
  --display:'Baloo 2',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fs-display:32px;
  --fs-h1:23px;
  --fs-h2:18px;
  --fs-body:15px;
  --fs-meta:13px;
  --fs-data:14px;
  --fs-eyebrow:11px;

  /* ---- touch target — every interactive control targets this ---- */
  --tap:44px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0f1c; --panel:#151b30; --panel-sunken:#0a0d18;
    --ink:#eef1fb; --ink-soft:#a9b3d1; --ink-faint:#6b76a0;
    --line:#262e4d;
    --teal-wash:#0f2b26; --amber-wash:#2e2214; --coral-wash:#2e1c17; --purple-wash:#241c40;
    --wordmark-team:#fdfdfd; --wordmark-pfaff:#cebffc;
  }
}
:root[data-theme="dark"]{
  --bg:#0b0f1c; --panel:#151b30; --panel-sunken:#0a0d18;
  --ink:#eef1fb; --ink-soft:#a9b3d1; --ink-faint:#6b76a0;
  --line:#262e4d;
  --teal-wash:#0f2b26; --amber-wash:#2e2214; --coral-wash:#2e1c17; --purple-wash:#241c40;
  --wordmark-team:#fdfdfd; --wordmark-pfaff:#cebffc;
}
:root[data-theme="light"]{
  --bg:#f6f7fb; --panel:#ffffff; --panel-sunken:#eef0f7;
  --ink:#132959; --ink-soft:#5b6787; --ink-faint:#94a0bd; --line:#e2e5f0;
  --teal-wash:#e3f3ee; --amber-wash:#fbeed9; --coral-wash:#f7e3de; --purple-wash:#f1eefb;
  --wordmark-team:#031855; --wordmark-pfaff:#672dea;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);font-family:var(--body);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  transition:background .15s,color .15s;
}
h1{font-family:var(--display);font-weight:700;font-size:var(--fs-h1);letter-spacing:-.01em;margin:0}
h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2);margin:0}
.sub{color:var(--ink-soft);font-size:var(--fs-body);margin-bottom:var(--sp-6)}
.eyebrow{font-size:var(--fs-eyebrow);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)}

/* ---- reduced motion (per-user preference, see auth.set_reduced_motion) ----
   Kills transitions/animations everywhere rather than enumerating every
   individual effect — applied via a class on <html>, same pattern as
   before this refresh, now defined once instead of per-app. ---------- */
.reduced-motion, .reduced-motion *{transition:none!important;animation:none!important}

/* ============================================================
   Shared components — buttons, tags, cards, inputs, modal, toast.
   Every app builds on these instead of redefining its own copy.
   44px is the floor for anything tappable (see CLAUDE.md's mobile
   touch-target audit) — don't shrink these per-app.
   ============================================================ */

.btn{
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  height:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-sm);
  font-size:14px;font-weight:600;font-family:var(--body);
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap;transition:.12s;text-decoration:none;
}
.btn:hover{border-color:var(--teal);color:var(--teal-deep)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.primary:hover{background:#064f43;color:#fff}
.btn.danger{border-color:var(--coral);color:var(--coral);background:transparent}
.btn.danger:hover{background:var(--coral-wash)}
.btn:disabled{opacity:.55;cursor:default}
.btn.sm{height:36px;padding:0 var(--sp-3);font-size:12px}
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible{
  outline:3px solid var(--teal-deep);outline-offset:2px;
}

.tag{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:var(--teal-wash);color:var(--teal-deep);padding:4px 10px;border-radius:var(--r-full);
}
.tag.open{background:var(--panel-sunken);color:var(--ink-soft);border:1px solid var(--line)}
.tag.amber{background:var(--amber-wash);color:var(--amber)}
.tag.purple{background:var(--purple-wash);color:var(--purple)}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);padding:var(--sp-4);
}

input.in, select.in, textarea.in{
  width:100%;border:1px solid var(--line);border-radius:var(--r-sm);
  height:var(--tap);padding:0 var(--sp-3);font-size:14px;color:var(--ink);
  background:var(--panel);font-family:var(--body);
}
textarea.in{height:auto;padding:var(--sp-3);resize:vertical;min-height:var(--tap)}
input.in:focus, select.in:focus, textarea.in:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-wash);
}
.fld{display:block;margin-bottom:var(--sp-4)}
.fld .lb{font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;display:block}

.empty{text-align:center;padding:var(--sp-12) var(--sp-4);color:var(--ink-soft)}
.empty svg{width:38px;height:38px;stroke:var(--ink-faint);fill:none;stroke-width:1.5;margin-bottom:var(--sp-3)}

/* ---- modal ---- */
.overlay{
  position:fixed;inset:0;background:rgba(19,41,89,.45);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:var(--sp-4);
}
.modal{
  background:var(--panel);border-radius:18px;width:100%;max-width:460px;max-height:90vh;
  display:flex;flex-direction:column;box-shadow:var(--shadow-md);
}
.modal-head{
  padding:var(--sp-6);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-head h2{font-size:var(--fs-h2)}
.modal-head .close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink-faint);line-height:1;
  width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center}
.modal-body{padding:var(--sp-6);overflow:auto}
.modal-foot{padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}

/* ---- toast ---- */
.toast{
  position:fixed;left:50%;bottom:var(--sp-6);transform:translate(-50%,20px);
  background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:var(--r-sm);
  font-size:14px;opacity:0;pointer-events:none;transition:.2s;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast-undo{
  background:none;border:1px solid rgba(255,255,255,.4);color:inherit;border-radius:7px;
  padding:3px 10px;font-size:13px;font-weight:700;cursor:pointer;margin-left:10px;
}
.toast-undo:hover{background:rgba(255,255,255,.15)}

/* ============================================================
   Shared header (see header.js) — the logo IS the home tap target,
   consistently placed and consistently behaved across every app.
   Icon-only under ~380px of header width, full lockup above it —
   deliberate mobile-first call, not an afterthought (see CLAUDE.md).
   ============================================================ */
header{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tp-bar{max-width:1100px;margin:0 auto;padding:var(--sp-3) var(--sp-4);display:flex;align-items:center;gap:var(--sp-3);min-height:56px}
.tp-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;flex:none;
  border-radius:var(--r-sm);padding:4px 6px;margin:-4px -6px}
.tp-brand:hover{background:var(--panel-sunken)}
.tp-mark{width:30px;height:auto;display:block;animation:tp-breathe 3.2s ease-in-out infinite}
@keyframes tp-breathe{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 8px color-mix(in srgb, var(--brand-purple) 30%, transparent))}}
.reduced-motion .tp-mark{animation:none}
@media (prefers-reduced-motion:reduce){.tp-mark{animation:none}}
.tp-word{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.01em;display:none;white-space:nowrap}
.tp-word-team{color:var(--wordmark-team)}
.tp-word-pfaff{color:var(--wordmark-pfaff)}
@media(min-width:380px){.tp-word{display:inline}}
.tp-spacer{flex:1}
.tp-center{flex:1;min-width:0;display:flex;align-items:center;padding:0 var(--sp-2)}
.tp-right{display:flex;align-items:center;gap:var(--sp-2);flex:none}
/* Shared by the header's own theme toggle (Phase 4b) and anything else
   that wants a square icon-only button — was portal-only (portal.css)
   before the toggle moved into the shared header; every app needs it now. */
.icon-only{width:var(--tap);padding:0;justify-content:center;font-size:16px}
.tp-bar-2{max-width:1100px;margin:0 auto;padding:0 var(--sp-4) var(--sp-2);
  display:flex;gap:var(--sp-2);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tp-bar-2::-webkit-scrollbar{display:none}

/* ---- login screen — shared shape, every app's login-wrap/login-card use this ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--sp-4)}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:var(--sp-8);width:100%;max-width:360px}
.login-sub{color:var(--ink-soft);font-size:14px;margin-bottom:var(--sp-6)}
.login-err{display:none;background:var(--coral-wash);color:var(--coral);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);font-size:13px;margin-bottom:var(--sp-3)}
.login-err.show{display:block}
.login-card label{display:block;margin-bottom:var(--sp-4)}
.lb{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:5px}
.login-card input{width:100%;height:var(--tap);padding:0 var(--sp-3);border:1px solid var(--line);border-radius:var(--r-sm);font-size:14px;color:var(--ink);background:var(--panel)}
.login-card input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-wash)}

/* Shared app navigation and functional contrast. */
:root{--ink-faint:#61708c;--teal:#096958;--amber:#875012;--coral:#a33725;--control-line:#77849c}
:root[data-theme="dark"]{--ink-faint:#abb9d4;--teal-deep:#82ddc8;--amber:#efbc76;--coral:#ffad99;--control-line:#8293b0}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink-faint:#abb9d4;--teal-deep:#82ddc8;--amber:#efbc76;--coral:#ffad99;--control-line:#8293b0}}
input.in,select.in,textarea.in,.login-card input{border-color:var(--control-line)}
summary:focus-visible,[contenteditable="true"]:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px}
.tp-bar,.tp-bar-2{max-width:1640px}
.tp-skip{position:absolute;left:12px;top:-100px;background:var(--panel);color:var(--ink);padding:12px;z-index:1000}
.tp-skip:focus{top:8px}
.tp-apps{position:relative}
.tp-apps>summary{list-style:none;min-width:70px}
.tp-apps>summary::-webkit-details-marker{display:none}
.tp-apps>summary::after{content:' ▾'}
.tp-app-menu{position:absolute;right:0;top:calc(100% + 8px);width:310px;max-width:calc(100vw - 24px);max-height:70vh;overflow:auto;background:var(--panel);border:1px solid var(--control-line);border-radius:12px;padding:12px;z-index:100;box-shadow:var(--shadow-md)}
.tp-app-hint{font-size:13px;color:var(--ink-soft);margin:0 0 8px}
.tp-app-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;margin-top:4px}
.tp-app-row a{color:var(--ink);padding:10px;min-height:44px;border-radius:6px;overflow-wrap:anywhere;display:flex;align-items:center;text-decoration:none}
.tp-app-row a:hover,.tp-app-row a[aria-current]{background:var(--teal-wash)}
.tp-app-row a:last-child{justify-content:center;border:1px solid var(--control-line)}
main:focus{outline:none} /* Skip destination is a region, not an interactive control. */
@media(max-width:600px){
  .tp-bar{position:relative;flex-wrap:wrap}
  .tp-center{order:3;flex-basis:100%;padding:0}
  .tp-apps{position:static}
  .tp-app-menu{right:12px;top:100%;width:calc(100vw - 24px)}
}