@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
/*
 * DeskOwl app craft layer. Loaded LAST in each page's <head>, after the page's own inline <style>,
 * so it wins the cascade (that inline block sets body to ui-sans-serif; here we put it back to the
 * brand pairing). Light 'paper' palette only. No colours outside design-tokens.json. Every idle
 * animation is gated behind prefers-reduced-motion. This is a craft pass: no layout or copy changes.
 */

:root {
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  /* Light-mode craft tokens, straight from design-tokens.json. */
  --k-amber: #ffb347; --k-coral: #ff7e5f; --k-orchid: #b06ab3;
  --k-amber-600: #ba7517; --k-focus: #ef9b2d; --k-espresso: #171412;
  --k-rose-ink: #a84a32; --k-orchid-ink: #8a4290;
}

/* ── 1. Typography ─────────────────────────────────────────────────────────── */
body { font-family: var(--font-body); }
h1, h2, h3, .h-lg, .h-md, .h-slab, .wm-t,
.tile b, .fig, .btn, .btn.pri, button.btn { font-family: var(--font-display); }
.h-lg { font-weight: 700; letter-spacing: -0.02em; }
.h-md { font-weight: 700; letter-spacing: -0.015em; }
.btn, button.btn { font-weight: 600; }
.wm-t { font-weight: 600; letter-spacing: 0.26em; }
/* Any figure that will ever hold a number lines up its digits. */
.fig, .tile b, .bar .bv, .dlist .amt, .dlist .cnt, .wk .cn, .badge, .pill,
.rail .badge, input, .amt, .money, [data-num] { font-variant-numeric: tabular-nums; }

/* ── 2. Warm depth (light only; dark keeps the theme's own flat surfaces) ───── */
.card, .tile, .rpick, .banner { box-shadow: var(--k-shadow, none); }
:root[data-mode="light"] { --k-shadow: 0 1px 2px rgba(42,32,40,0.05), 0 4px 16px rgba(42,32,40,0.06), inset 0 1px 0 rgba(255,255,255,0.7); }
@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]) { --k-shadow: 0 1px 2px rgba(42,32,40,0.05), 0 4px 16px rgba(42,32,40,0.06), inset 0 1px 0 rgba(255,255,255,0.7); }
}
/* Faint dot grid on the page ground, 2% ink, 140px spacing. No grain on light surfaces. */
:root[data-mode="light"] body,
body { --k-dots: none; }
@media (prefers-color-scheme: light) { :root:not([data-mode="dark"]) body { --k-dots: radial-gradient(rgba(42,32,40,0.02) 1px, transparent 1px); } }
:root[data-mode="light"] body { --k-dots: radial-gradient(rgba(42,32,40,0.02) 1px, transparent 1px); }
body { background-image: var(--k-dots); background-size: 140px 140px; background-attachment: fixed; }

/* ── 3. The gradient signature (used sparingly per the brief) ───────────────── */
/* 'Your business is ready' banner: whisper-volume gradient rim, warm cream fill inside. */
.banner {
  border: 1px solid transparent; border-radius: 16px;
  background:
    linear-gradient(var(--amber-wash), var(--amber-wash)) padding-box,
    linear-gradient(90deg, rgba(255,179,71,0.28), rgba(255,126,95,0.28), rgba(176,106,179,0.28)) border-box;
}
/* Setup checklist: gradient coins instead of flat squares, espresso tick. */
.chk .bx { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-2); }
.chk.done .bx {
  border: none; color: var(--k-espresso);
  background: linear-gradient(135deg, var(--k-amber), var(--k-coral) 55%, var(--k-orchid));
  box-shadow: 0 2px 10px rgba(255,126,95,0.35);
}
/* Completion progress bar under 'Finish setting up'. */
.setup-prog { height: 3px; border-radius: 999px; background: var(--panel-2); overflow: hidden; margin: 4px 0 12px; }
.setup-prog > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--k-amber), var(--k-coral), var(--k-orchid)); transition: width 0.6s cubic-bezier(0.16,1,0.3,1); }
/* KPI values, once live: gradient-clipped in the DEEP light stops for contrast on paper. Light only,
   because rose-ink/orchid-ink vanish on a dark card. */
:root[data-mode="light"] .tile:not(.dim) b,
:root[data-mode="light"] .fig { background: linear-gradient(100deg, var(--k-rose-ink), var(--k-orchid-ink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]) .tile:not(.dim) b,
  :root:not([data-mode="dark"]) .fig { background: linear-gradient(100deg, var(--k-rose-ink), var(--k-orchid-ink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* ── 4. Micro-motion (all gated on prefers-reduced-motion) ──────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* Cards fade up on render. Subtle, staggered. */
  #v-today .tiles > *, #v-today > .banner, #v-today > .card,
  #content .tiles > *, #content > .banner, #content > .card {
    animation: kUp 0.6s cubic-bezier(0.16,1,0.3,1) both;
  }
  #v-today .tiles > *:nth-child(2), #content .tiles > *:nth-child(2) { animation-delay: 60ms; }
  #v-today .tiles > *:nth-child(3), #content .tiles > *:nth-child(3) { animation-delay: 120ms; }
  #v-today .tiles > *:nth-child(4), #content .tiles > *:nth-child(4) { animation-delay: 180ms; }
  @keyframes kUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  /* KPI tiles lift on hover; forms and content cards stay put. */
  .tile { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s cubic-bezier(0.22,1,0.36,1); }
  a > .tile:hover, .tile:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(42,32,40,0.06), 0 10px 26px rgba(42,32,40,0.10), inset 0 1px 0 rgba(255,255,255,0.7); }

  /* Sidebar items shift a touch on hover. */
  .rail a, .rail button.navlink { transition: background 0.2s ease, transform 0.2s ease; }
  .rail a:hover, .rail button.navlink:hover { transform: translateX(2px); }

  /* Test mode pill: slow warm glow so it reads as 'not live yet, but alive'. */
  .pill.off { animation: kGlow 3s ease-in-out infinite; }
  @keyframes kGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,179,71,0); } 50% { box-shadow: 0 0 18px 4px rgba(255,179,71,0.25); } }

  /* The owl lives: eyes blink once every ~6s. */
  .wm-o .owl-eye { transform-box: fill-box; transform-origin: center; animation: owl-blink 6.2s linear infinite; }
  @keyframes owl-blink { 0%, 93.5% { transform: scaleY(1); } 94.8%, 95.8% { transform: scaleY(0.08); } 97%, 100% { transform: scaleY(1); } }
}

/* ── 5. Sidebar active item: warm tint (kept) plus a gradient left rail ─────── */
.rail a.on { position: relative; }
.rail a.on::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0; background: linear-gradient(180deg, var(--k-amber), var(--k-coral), var(--k-orchid)); }

/* ── 6. Finishing ───────────────────────────────────────────────────────────── */
/* Tiny section labels: uppercase and tracked. Slate, not amber: amber-600 on paper is only
   3.35:1 and fails the 4.5:1 guardrail at this size, so the warmth lives in the coins/rail/progress
   instead. Slate is a brief-approved text token at 6.92:1. */
.tile .t { font-size: 11px; letter-spacing: 0.16em; font-weight: 600; color: #5f5049; }
/* Focus rings on every interactive element. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--k-focus); outline-offset: 2px; border-radius: 8px;
}
::selection { background: var(--k-amber); color: var(--k-espresso); }

/* ── 7. Empty-state ghost previews (sell what's coming, not a dash) ──────────── */
.tile .ghost-wrap { line-height: 0; margin: 1px 0; }
.tile .ghost { height: 26px; width: auto; display: block; opacity: 0.35; color: var(--muted); }
