/* theme.css — design tokens, reset, light/dark/auto themes.
 * Loaded first; every other sheet references these custom properties. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  /* two faint forge glows (accent + violet) bled in from the top corners over the
     base — the app never reads as a flat sheet. Fixed so it doesn't scroll. */
  background:
    radial-gradient(58% 48% at 12% -6%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 66%),
    radial-gradient(52% 44% at 104% 4%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 64%),
    radial-gradient(46% 34% at 50% 112%, color-mix(in srgb, var(--ember) 6%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;                 /* the app owns its scroll regions; the page never scrolls */
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
code, pre, kbd { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
               "Inter", system-ui, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  /* asymmetric radii are the shape signature: a pronounced top-left corner (r-tl) on
     primary panels reads like a forged plate; the other corners stay tight. */
  --r1: 5px; --r2: 9px; --r3: 13px; --r4: 18px; --r-tl: 22px; --r-pill: 999px;
  --t-xs: 11px; --t-sm: 13px; --t-md: 15px; --t-lg: 18px; --t-xl: 24px; --t-2xl: 33px; --t-3xl: 44px;

  /* SolMates "Forge" identity — a Solana-native builder's console. A vivid teal-green
     primary forged with a violet partner in --forge, kept distinct from the reference
     purple. A view may override --accent-h inline (e.g. a per-phase tint). */
  --accent-h: 158;
  --accent:      hsl(var(--accent-h) 82% 43%);
  --accent-2:    hsl(266 74% 60%);                       /* violet partner for gradients */
  --accent-soft: hsl(var(--accent-h) 82% 43% / 0.14);
  --accent-ink:  hsl(var(--accent-h) 82% 28%);           /* readable teal TEXT on the light surface (≥4.5:1); dark override below */
  --forge:      linear-gradient(118deg, hsl(var(--accent-h) 82% 46%), hsl(266 74% 60%));
  --forge-soft: linear-gradient(118deg, hsl(var(--accent-h) 82% 46% / .16), hsl(266 74% 60% / .16));
  --ember:      hsl(28 92% 55%);                         /* forge ember, for rare heat accents */
  --glow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
          0 6px 22px -6px color-mix(in srgb, var(--accent) 45%, transparent);
  /* the living roadmap "spine": a teal→violet vertebra that fades as it descends —
     used in the sidebar phase tree and echoed by the full Spine view. */
  --spine: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 62%, transparent),
    color-mix(in srgb, var(--accent-2) 46%, transparent) 55%,
    color-mix(in srgb, var(--accent-2) 12%, transparent));

  /* Category palette — the SolMates program/backend taxonomy (PLANNING §B.3), grouped
     by concept so related work shares a hue family. Names match the task `cat`, so a
     chip resolves var(--cat-<cat>) directly; unknowns fall back to --cat-alt. Kept
     clear of the accent teal and the reserved on-time gold. */
  --cat-scaffold:    #6b7fb0;   /* groundwork / plumbing — steel blue */
  --cat-state:       #4a9eff;   /* account data shapes — blue */
  --cat-instruction: #6366f1;   /* program entrypoints — indigo */
  --cat-engine:      #a78bfa;   /* pure draw / logic core — violet */
  --cat-vrf:         #ec4899;   /* verifiable randomness — magenta */
  --cat-token:       #22d3ee;   /* SPL / value flows — cyan */
  --cat-security:    #ef4444;   /* guards / audit — red */
  --cat-test:        #22c55e;   /* coverage / passing — green */
  --cat-gate:        #f97316;   /* quality gate — orange */
  --cat-indexer:     #38bdf8;   /* chain mirror — sky */
  --cat-api:         #0d9488;   /* backend surface — deep teal */
  --cat-cron:        #c084fc;   /* scheduled jobs — purple */
  --cat-ui:          #ff6b9d;   /* dApp frontend — pink */
  --cat-deploy:      #10b981;   /* shipped — emerald */
  --cat-design:      #94a3b8;   /* planning / design — grey-blue */
  --cat-study:       #818cf8;   /* learning — periwinkle */
  --cat-milestone:   #f472b6;   /* landmark — rose */
  --cat-alt:         #64748b;   /* fallback — neutral slate */

  --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444; --info: #38bdf8;
  /* on-time meter — a punctual gold reserved for the third progress ring/bar,
     kept clear of the accent, the grey original and the amber warn. */
  --ontime: #eab308;
  --ontime-ink: #a16207;                                 /* darker gold for on-time TEXT — readable on the light surface */

  --dur-fast: 120ms; --dur: 220ms; --dur-slow: 380ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --sidebar-w: 268px;
  --sidebar-w-collapsed: 60px;
  --maxread: 1080px;
}

/* Registered so the conic rings and sweeping bars can interpolate instead of snap. */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --accent-h { syntax: "<number>"; inherits: true; initial-value: 158; }

@keyframes revealUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reveal { animation: revealUp .52s var(--ease-out) both; animation-delay: var(--rd, 0ms); }

/* ---- Signature motion (all compositor-only; reduce-motion zeroes them) ---- */
/* the checkbox "forge stamp": a spring pop with an accent shock-ring on completion */
@keyframes stamp {
  0% { transform: scale(1); } 40% { transform: scale(.82); }
  70% { transform: scale(1.14); } 100% { transform: scale(1); }
}
@keyframes shockRing {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  to   { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@keyframes barSheen { to { transform: translateX(120%); } }
/* a slow drifting highlight along a forge-filled bar */
@keyframes forgeDrift { 0% { background-position: 0% 50%; } 100% { background-position: 160% 50%; } }
/* the "navigate" signature: view blocks rise in with a short per-block stagger */
@keyframes viewEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.view-enter { animation: viewEnter .5s var(--ease-out) both; animation-delay: var(--vi, 0ms); }
/* chart bars forge upward from the baseline */
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* day-100% forge flourish: sparks fly out from the completed day's Actual ring */
@keyframes sparkFly {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.35); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); }
}
.forge-burst { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.forge-spark { position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 2px;
  will-change: transform, opacity; animation: sparkFly .82s var(--ease-out) forwards; }

/* Light is the default; dark applies under OS-dark unless forced light, and an
   explicit data-theme from the settings toggle wins in both directions. */
:root, :root[data-theme="light"] {
  --bg:        #f5f6f9;
  --bg-2:      #eaecf1;
  --surface:   #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #eef1f6;
  --border:    #e2e6ed;
  --border-2:  #d2d7e1;
  --text:      #1b2130;
  --text-2:    #586074;
  --text-3:    #6b7385;
  --shadow-sm: 0 1px 2px rgba(20,25,40,.06), 0 1px 3px rgba(20,25,40,.05);
  --shadow:    0 4px 12px rgba(20,25,40,.08), 0 2px 4px rgba(20,25,40,.05);
  --shadow-lg: 0 18px 48px rgba(20,25,40,.16), 0 6px 16px rgba(20,25,40,.10);
  --scrim:     rgba(26,32,46,.42);
  --track:     #e5e8f0;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0d0f16;
    --bg-2:      #090b11;
    --surface:   #161923;
    --surface-2: #1c202b;
    --surface-3: #242936;
    --border:    #252a37;
    --border-2:  #323949;
    --text:      #e8ebf2;
    --text-2:    #99a2b6;
    --text-3:    #7c8698;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 6px 18px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.45);
    --scrim:     rgba(0,0,0,.6);
    --track:     #222734;
    --ontime-ink: #eab308;
    --accent-ink: hsl(var(--accent-h) 70% 52%);          /* bright teal text reads well on the dark surface */
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:        #0d0f16;
  --bg-2:      #090b11;
  --surface:   #161923;
  --surface-2: #1c202b;
  --surface-3: #242936;
  --border:    #252a37;
  --border-2:  #323949;
  --text:      #e8ebf2;
  --text-2:    #99a2b6;
  --text-3:    #7c8698;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 6px 18px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.45);
  --scrim:     rgba(0,0,0,.6);
  --track:     #222734;
  --ontime-ink: #eab308;
  --accent-ink: hsl(var(--accent-h) 70% 52%);          /* bright teal text reads well on the dark surface */
  color-scheme: dark;
}

:root[data-density="compact"] { --s4: 12px; --s5: 18px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  animation-duration: .001ms !important; transition-duration: .001ms !important;
}