/* ============================================================
   SQUIRREL — shared design system
   A toolkit for brains that bounce.
   Zero dependencies. Offline-first. ADHD-informed.
   ------------------------------------------------------------
   Design principles encoded here:
   - Calm, low-noise base so accents can carry meaning
   - One vivid "signature" accent per app (set --accent)
   - Big hit targets, generous spacing, strong hierarchy
   - Motion is a reward, but always honors reduced-motion
   - Nothing speculative: only tokens the apps actually use
   ============================================================ */

:root {
  /* base surfaces (deep ink) */
  --bg:        #0e0f14;
  --bg-2:      #14161f;
  --surface:   #1a1d2a;
  --surface-2: #222637;
  --line:      #2c3144;

  /* text */
  --text:    #eef0f7;
  --muted:   #9aa1bd;
  --faint:   #646b88;

  /* dopamine palette — apps pick one as --accent */
  --lime:    #b8ff5c;
  --mint:    #7cffb2;
  --cyan:    #4dd6ff;
  --blue:    #5b8cff;
  --violet:  #a78bfa;
  --magenta: #ff4d8d;
  --coral:   #ff6b5c;
  --amber:   #ffb83d;

  /* semantic */
  --good: var(--mint);
  --warn: var(--amber);
  --bad:  var(--coral);

  /* the signature accent (overridden per app) */
  --accent: var(--mint);
  --accent-ink: #0e0f14;       /* readable text ON the accent */

  /* shape + depth */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow:    0 10px 40px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 80px rgba(0,0,0,.55);
  --glow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
          0 8px 40px color-mix(in srgb, var(--accent) 28%, transparent);

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* motion */
  --spring: 320ms cubic-bezier(.34, 1.56, .64, 1);
  --ease:   220ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--font);
  background:
    radial-gradient(1200px 800px at 50% -20%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

/* ---- type scale ---- */
h1, h2, h3 { line-height: 1.1; margin: 0 0 .4em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(28px, 5vw, 44px); }
h2 { font-size: clamp(20px, 3vw, 28px); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- layout helpers ---- */
.wrap { max-width: 920px; margin: 0 auto; padding: clamp(20px, 4vw, 48px); }
.row  { display: flex; gap: 12px; align-items: center; }
.col  { display: flex; flex-direction: column; gap: 12px; }
.between { justify-content: space-between; }
.center { justify-content: center; align-items: center; }
.wrap-tight { max-width: 620px; }
.grow { flex: 1; }
.hide { display: none !important; }

/* ---- cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--shadow);
}
.card.glow { box-shadow: var(--glow), var(--shadow); border-color: transparent; }

/* ---- buttons ---- */
button, .btn {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  padding: 14px 20px;
  border-radius: var(--r);
  transition: transform var(--spring), background var(--ease), border-color var(--ease), box-shadow var(--ease);
  user-select: none;
  -webkit-user-select: none;
  min-height: 48px;            /* big targets */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
button:hover, .btn:hover { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
button:active, .btn:active { transform: scale(.96); }
button:focus-visible, .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

button.primary, .btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 35%, transparent);
}
button.primary:hover, .btn.primary:hover { filter: brightness(1.06); background: var(--accent); }
button.ghost { background: transparent; }
button.danger { color: var(--coral); border-color: color-mix(in srgb, var(--coral) 40%, var(--line)); }
button.big { font-size: 20px; padding: 20px 28px; min-height: 64px; border-radius: var(--r-lg); }
button:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ---- inputs ---- */
input[type="text"], input[type="number"], input[type="time"], textarea, select {
  font: inherit;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  width: 100%;
  transition: border-color var(--ease), box-shadow var(--ease);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
::placeholder { color: var(--faint); }
label { font-weight: 600; color: var(--muted); font-size: 14px; }

/* ---- chips / pills ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all var(--ease);
}
.chip[aria-pressed="true"], .chip.on {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent);
  color: var(--text);
}
.tag { display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:700;
       background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }

/* ---- pretty scrollbars ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- the squirrel mark (shared header brand) ---- */
.sq-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--muted); font-weight:700; font-size:14px; }
.sq-brand:hover { color: var(--text); }
.sq-brand .acorn { font-size: 18px; }

/* ---- accent text ---- */
.accent { color: var(--accent); }

/* ---- toast ---- */
.sq-toast-host { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 9999; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.sq-toast {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--accent);
  padding: 12px 20px; border-radius: 999px; font-weight: 700;
  box-shadow: var(--shadow); animation: sq-pop var(--spring);
}
@keyframes sq-pop { from { transform: translateY(12px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- confetti canvas ---- */
.sq-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }

/* ---- breathing / pulse utility ---- */
@keyframes sq-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.breathe { animation: sq-breathe 4s ease-in-out infinite; }

/* ---- help / onboarding / privacy system (SQ.help) ---- */
.sq-help-btn {
  position: fixed; right: 18px; bottom: 18px; z-index: 9990;
  width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 999px;
  font-size: 20px; font-weight: 800; line-height: 1;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
  box-shadow: var(--shadow); cursor: pointer;
}
.sq-help-btn:hover { color: var(--text); border-color: var(--accent); }
.sq-modal-back {
  position: fixed; inset: 0; z-index: 9991; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(4,5,8,.66); backdrop-filter: blur(4px); animation: sq-pop var(--ease);
}
.sq-modal {
  width: 100%; max-width: 520px; max-height: 86vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: clamp(20px, 4vw, 30px); animation: sq-pop var(--spring);
}
.sq-modal .sq-x { float: right; background: transparent; border: none; color: var(--faint); font-size: 22px;
                  min-height: 0; padding: 0 4px; cursor: pointer; }
.sq-modal .sq-x:hover { color: var(--text); background: transparent; }
.sq-modal h2 { margin: 0 0 4px; }
.sq-modal .sq-tag { color: var(--muted); margin: 0 0 18px; }
.sq-modal h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
               margin: 22px 0 10px; }
.sq-steps { list-style: none; padding: 0; margin: 0; counter-reset: sq; }
.sq-steps li { position: relative; padding: 0 0 14px 42px; counter-increment: sq; }
.sq-steps li::before { content: counter(sq); position: absolute; left: 0; top: -2px; width: 28px; height: 28px;
  border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent);
  font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.sq-steps li b { display: block; }
.sq-steps li span { color: var(--muted); font-size: 14px; }
.sq-faq details { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 8px; }
.sq-faq summary { cursor: pointer; font-weight: 700; }
.sq-faq details p { color: var(--muted); margin: 8px 0 0; font-size: 14px; }
.sq-priv { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; }
.sq-priv .row { display: flex; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.sq-priv .row:last-child { margin-bottom: 0; }
.sq-priv .row .k { flex: 0 0 92px; color: var(--accent); font-weight: 700; }
.sq-priv .row .v { color: var(--text); }
.sq-disc { color: var(--muted); font-size: 14px; line-height: 1.6; border-left: 3px solid var(--accent);
           padding: 4px 0 4px 14px; }
.sq-reset { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.sq-reset .danger { width: 100%; }
.sq-reset .warn { color: var(--coral); font-size: 13px; margin: 10px 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .breathe { animation: none; }
}