/* ============================================================
   ruosenzhao design language · v1
   -- This is the single source of truth. Edit this file and copy it into each site's assets/ to apply site-wide.
   Usage:
     <link rel="stylesheet" href="assets/tokens.css">
     <link rel="stylesheet" href="assets/base.css">
     <script src="assets/theme.js" defer></script>
   Theme: JS writes data-theme="dark|light" on <html> (default follows the system).
   To change only colors/radii/font sizes/motion, edit just this file; not a line of component code changes.
   ============================================================ */
:root{
  /* Surfaces */
  --bg:#0b0d10; --surface:#12161c; --surface-2:#181d25; --raised:#20262f;
  --divider:rgba(255,255,255,.07);   /* purely decorative, carries no border semantics */
  --edge:#5c6a7a;                    /* control stroke, kept >=3:1 */
  /* Text */
  --fg:#e7ecf3; --muted:#98a5b5; --dim:#8b97a9;
  /* Accent: one color, three roles -- active item / primary button / focus ring */
  --accent:#5b9dff; --on-accent:#08111f;
  --ok:#3fb950; --warn:#d29922; --danger:#f85149;
  /* Category colors (low saturation) */
  --c-note:#a78bfa; --c-pdf:#f87171; --c-img:#2dd4bf; --c-doc:#60a5fa; --c-code:#fbbf24; --c-arc:#94a3b8;
  /* Shadows */
  --sh-1:0 1px 2px rgba(0,0,0,.40); --sh-2:0 6px 20px rgba(0,0,0,.45); --sh-3:0 20px 50px rgba(0,0,0,.58);
  /* Geometry */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-full:999px;
  --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:32px;
  --tap:44px;          /* minimum tappable size: touch friendly */
  --gap:12px; --pad:16px; --maxw:1100px;
  /* Spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  /* Line heights */
  --lh-tight:1.25; --lh-base:1.55; --lh-loose:1.7;
  /* Icon sizes */
  --icon-sm:16px; --icon-md:20px; --icon-lg:24px;
  --dur:140ms; --ease:cubic-bezier(.2,.7,.3,1);
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
/* Light: the same token names get a new set of values -- component code stays untouched */
:root[data-theme="light"]{
  --bg:#f5f7fa; --surface:#ffffff; --surface-2:#eef1f5; --raised:#ffffff;
  --divider:rgba(16,24,40,.09); --edge:#8a94a6;
  --fg:#141a22; --muted:#5a6675; --dim:#6b7787;
  --accent:#2563eb; --on-accent:#ffffff;
  --ok:#1a7f37; --warn:#9a6700; --danger:#cf222e;
  --c-note:#7c5cf0; --c-pdf:#d33c3c; --c-img:#0d9488; --c-doc:#2563eb; --c-code:#b45309; --c-arc:#64748b;
  --sh-1:0 1px 2px rgba(16,24,40,.06); --sh-2:0 6px 20px rgba(16,24,40,.10); --sh-3:0 20px 50px rgba(16,24,40,.16);
  color-scheme:light;
}
/* No-JS fallback: follows the system when data-theme has not been set */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f5f7fa; --surface:#ffffff; --surface-2:#eef1f5; --raised:#ffffff;
    --divider:rgba(16,24,40,.09); --edge:#8a94a6;
    --fg:#141a22; --muted:#5a6675; --dim:#6b7787;
    --accent:#2563eb; --on-accent:#ffffff;
    --ok:#1a7f37; --warn:#9a6700; --danger:#cf222e;
    --c-note:#7c5cf0; --c-pdf:#d33c3c; --c-img:#0d9488; --c-doc:#2563eb; --c-code:#b45309; --c-arc:#64748b;
    --sh-1:0 1px 2px rgba(16,24,40,.06); --sh-2:0 6px 20px rgba(16,24,40,.10); --sh-3:0 20px 50px rgba(16,24,40,.16);
    color-scheme:light;
  }
}
/* Touch / narrow-screen rhythm (tablets covered too) */
@media (max-width:600px){ :root{ --pad:14px; --gap:10px; --fs-2xl:21px; --fs-3xl:26px; } }