/* ===========================================================
   Acorn Study — Design System
   Fresh, growing, airy. ADHD-friendly: high legibility,
   generous spacing, calm motion, clear hierarchy.
   Rewards: ⚡ sparks · Growth motif: acorn → oak.
   Fonts (Fredoka + Nunito) are loaded via <link> in the
   document head for non-render-blocking delivery.
   =========================================================== */

:root {
  /* --- Fresh growth palette (oklch) --- */
  --bg:        oklch(0.975 0.010 135);  /* fresh paper, faint green-neutral */
  --bg-2:      oklch(0.955 0.014 138);  /* deeper band */
  --surface:   oklch(0.995 0.005 135);  /* near-white card */
  --surface-2: oklch(0.975 0.009 135);
  --ink:       oklch(0.27 0.030 155);   /* deep forest ink */
  --ink-soft:  oklch(0.45 0.028 155);
  --ink-faint: oklch(0.62 0.022 155);
  --line:      oklch(0.915 0.014 140);

  /* Accents — cohesive, varied hue */
  --sprout:    oklch(0.62 0.130 150);   /* primary fresh green */
  --sprout-deep:oklch(0.54 0.130 152);
  --sprout-ink:oklch(0.40 0.10 152);
  --spark:     oklch(0.80 0.140 85);    /* warm amber — reward / energy */
  --spark-deep:oklch(0.72 0.150 78);
  --leaf:      oklch(0.70 0.120 135);   /* bright lime-green */
  --sky:       oklch(0.68 0.100 220);   /* cool teal calm accent */
  --coral:     oklch(0.64 0.150 30);    /* streak / heat */
  --grape:     oklch(0.58 0.130 300);   /* extra accent */

  /* Legacy aliases (kept so older refs resolve) */
  --acorn:     var(--spark);
  --forest:    var(--sprout);
  --forest-deep:var(--sprout-deep);
  --berry:     var(--coral);
  --gold:      var(--spark);

  /* Theme hook — overridden by tweaks */
  --brand:     var(--sprout);
  --brand-deep:var(--sprout-deep);

  --radius:   18px;
  --radius-sm:12px;
  --radius-lg:28px;

  --shadow-sm: 0 1px 2px oklch(0.4 0.05 60 / 0.08), 0 2px 6px oklch(0.4 0.05 60 / 0.06);
  --shadow:    0 4px 10px oklch(0.4 0.06 60 / 0.10), 0 12px 28px oklch(0.4 0.06 60 / 0.10);
  --shadow-lg: 0 10px 24px oklch(0.4 0.06 60 / 0.14), 0 28px 60px oklch(0.4 0.06 60 / 0.16);

  --font-head: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  --speed: 1; /* calm mode scales this up */
}

/* Calm / low-distraction mode */
:root[data-calm="true"] {
  --bg:    oklch(0.975 0.006 150);
  --bg-2:  oklch(0.96 0.008 150);
  --sprout: oklch(0.58 0.085 152);
  --sprout-deep: oklch(0.50 0.085 152);
  --spark: oklch(0.78 0.085 88);
  --coral: oklch(0.60 0.085 32);
  --speed: 1.5;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

button { font-family: var(--font-body); cursor: pointer; border: none; }

/* ---- Reusable pieces ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1rem;
  padding: 14px 22px;
  border-radius: 14px;
  background: var(--brand);
  color: oklch(0.99 0.01 85);
  text-decoration: none;
  box-shadow: 0 3px 0 var(--brand-deep), var(--shadow-sm);
  transition: transform calc(0.08s * var(--speed)) ease, box-shadow calc(0.08s * var(--speed)) ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.03); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--brand-deep), var(--shadow-sm); }
.btn.secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line);
  box-shadow: 0 3px 0 var(--line), var(--shadow-sm);
}
.btn.ghost {
  background: transparent;
  color: var(--ink-soft);
  box-shadow: none;
  font-weight: 700;
}
.btn.ghost:active { transform: none; }

/* Keyboard focus visibility (a11y) */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

/* Skip link — visible only on keyboard focus */
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--surface); color: var(--ink);
  padding: 10px 16px; border-radius: 12px; font-weight: 800;
  text-decoration: none; box-shadow: var(--shadow);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid var(--bg); }

/* Smooth in-page anchor scrolling, but respect motion prefs */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}