/* BookLoop — design tokens (dark premium glass). One system, all surfaces. */
:root{
  /* Canvas & elevation — never pure #000 behind text */
  --canvas:#0a0b0f; --surface-1:#121319; --surface-2:#181a22; --surface-3:#20232c; --surface-4:#282b36;
  --glass-1:rgba(20,22,30,.60); --glass-2:rgba(26,28,38,.66); --glass-3:rgba(32,35,46,.72);

  /* Hairline borders */
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14); --border-inset:rgba(255,255,255,.05);

  /* Text */
  --fg:#f4f5f7; --fg-muted:#a4a8b3; --fg-subtle:#6c7080; --fg-disabled:#4a4d59;

  /* Accent (overridden per theme in themes.css) */
  --accent:#6d6af0; --accent-hover:#8480f4; --accent-press:#5b58d6; --accent-fg:#fff; --accent-ghost:rgba(109,106,240,.14);

  /* Status — punctuation, not decoration */
  --ok:#34d399; --ok-ghost:rgba(52,211,153,.14);
  --warn:#f5b14b; --warn-ghost:rgba(245,177,75,.14);
  --danger:#f4685f; --danger-ghost:rgba(244,104,95,.14);
  --info:#5fb3f4; --info-ghost:rgba(95,179,244,.14);
  --pending:#b388f4; --pending-ghost:rgba(179,136,244,.14);

  --ring:var(--accent); --ring-w:2px;

  /* Type */
  --font-sans:"Inter var",Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  --font-mono:"Geist Mono","SF Mono",ui-monospace,monospace;
  --w-regular:400; --w-book:510; --w-medium:590; --w-bold:680;
  --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-md:14px; --text-lg:16px; --text-xl:20px; --text-2xl:24px; --text-3xl:32px;

  /* Spacing (4px grid) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;

  /* Radii */
  --radius:10px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-full:999px;

  /* Shadows & blur */
  --shadow-1:0 1px 2px rgba(0,0,0,.30);
  --shadow-2:0 4px 16px rgba(0,0,0,.36), inset 0 1px 0 var(--border-inset);
  --shadow-3:0 12px 40px rgba(0,0,0,.46), inset 0 1px 0 var(--border-inset);
  --shadow-pop:0 16px 48px rgba(0,0,0,.55);
  --blur-glass:18px; --blur-heavy:28px;

  /* Motion */
  --ease:cubic-bezier(.2,.8,.2,1); --dur-fast:120ms; --dur:160ms; --dur-slow:220ms;

  /* Density (compact desktop default) */
  --row-h:40px; --control-h:34px; --font-body:var(--text-sm);
}

[data-density="cozy"]{ --row-h:48px; --control-h:36px; --font-body:var(--text-sm); }
[data-density="soft"]{ --row-h:56px; --control-h:44px; --font-body:var(--text-md); }

*{box-sizing:border-box;}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:999px;border:2px solid transparent;background-clip:padding-box;}
*::-webkit-scrollbar-track{background:transparent;}

html,body{margin:0;padding:0;}
body{
  font-family:var(--font-sans); color:var(--fg); font-size:var(--font-body); font-weight:var(--w-book);
  line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(1100px 700px at 8% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(1000px 800px at 100% 0%, rgba(95,179,244,.07), transparent 55%),
    radial-gradient(1100px 900px at 60% 130%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    var(--canvas);
  background-attachment:fixed; min-height:100vh;
}
h1,h2,h3,h4{margin:0;font-weight:var(--w-bold);letter-spacing:-.02em;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

/* Canonical glass panel */
.glass{
  background:var(--glass-2);
  backdrop-filter:blur(var(--blur-glass)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur-glass)) saturate(140%);
  border:1px solid var(--border); box-shadow:var(--shadow-2); border-radius:var(--radius-lg);
}

:focus-visible{outline:var(--ring-w) solid var(--ring); outline-offset:2px; border-radius:4px;}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
  .sheet{transform:none !important;}
  .view.active{animation:none !important;}
}

/* skip-to-main-content link (a11y) */
.skip-link{position:absolute;left:-9999px;top:auto;}
.skip-link:focus{left:16px;top:16px;z-index:100;background:var(--accent);color:var(--accent-fg);
  padding:8px 16px;border-radius:var(--radius-md);box-shadow:var(--shadow-3);}

/* screen-reader-only utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}